CSS @media grid Property

Posted in CSS Tutorial

Updated on Sep 14, 2024

By Mari Selvan

👁️ 3 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

The @media rule in CSS allows developers to apply specific styles based on various conditions such as screen size, resolution, and orientation.

The grid feature within @media queries is used to apply styles based on whether the device supports grid-based layout systems. This can help in designing responsive layouts that take advantage of CSS Grid when it’s supported by the user’s browser.

💡 Syntax

The syntax for the @media grid property is simple. It checks if the browser supports grid-based layouts, and applies styles if the condition is true.

Syntax

Copied

@media (grid) {
  /* Styles for devices that support CSS Grid */
  element {
    /* custom styles */
  }
}

🏠 Property Values

(grid): This media query checks if the device or browser supports CSS Grid. If true, the styles within the media query block will be applied.

🎛️ Default Value

The default state of the @media grid property depends on whether the browser supports grid-based layouts. If it does, the media query will return true, and the defined styles will be applied.

📝 Example Usage

📜 Basic Usage

In this example, we apply a two-column grid layout only if the browser supports CSS Grid.

example.scss

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS @media grid Example</title>
  <style>
    .container {
      display: flex;
      flex-direction: column;
    }
    
    @media (grid) {
      .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
      }
    }
  </style>
</head>
<body>
  <h1>Responsive Layout with CSS @media grid</h1>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The @media (grid) property is supported in most modern browsers, including Chrome, Firefox, Edge, and Safari. Always ensure your website is tested across different devices and browsers to check for compatibility with the grid layout.

🎉 Conclusion

The @media grid property provides a powerful way to apply styles only when CSS Grid is supported by the user’s browser. This can help in creating responsive designs that take full advantage of the grid layout system, while falling back to other layouts (like flexbox or block) for browsers that don’t support it. This makes your web pages more adaptive and ensures a better user experience.