CSS grid Media Feature

What You’ll Learn

The grid media feature detects whether the browser supports CSS Grid layout. Use it to upgrade from flexbox or block fallbacks when Grid is available.

Introduction

The @media (grid) feature lets you apply CSS only when the output device supports grid-based layout. In web development, that means the browser can use CSS Grid — a two-dimensional layout system for rows and columns.

Before Grid was universal, developers wrote flexbox or float-based layouts as defaults, then wrapped Grid rules inside @media (grid) to enhance the experience on capable browsers. That progressive enhancement pattern is still a great way to learn how media features work.

Definition and Usage

Write @media (grid) { ... } around rules that require Grid support. Outside the query, provide a layout that works everywhere — usually flexbox stacked vertically or a simple block flow.

📝 Syntax

Use the boolean form or explicit integer values inside an @media rule:

/* Boolean — Grid is supported */
@media (grid) {
  /* Styles when CSS Grid is available */
}

/* Explicit values */
@media (grid: 1) {
  /* Same as (grid) — supported */
}

@media (grid: 0) {
  /* Grid not supported — fallback styles */
}

Accepted Values

• (grid) — Boolean form; matches when Grid layout is supported (equivalent to grid: 1).
• grid: 1 — Explicit match for Grid-capable devices.
• grid: 0 — Matches when Grid is not supported; use for fallback-only rules.

grid Media Feature vs display: grid

Basic Example

.container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (grid) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}

Modern Alternative: @supports

/* Preferred in modern CSS */
@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

Default Value

There is no CSS default. The browser reports whether Grid layout is supported at runtime. On current browsers, (grid) typically matches.

Syntax Rules

• Always define a non-Grid fallback outside the media query.
• Boolean (grid) is the most common form in tutorials and legacy code.
• Combine with viewport queries: @media (grid) and (min-width: 48rem).
• For new projects, consider @supports (display: grid) instead.
• Test in DevTools by temporarily disabling Grid support if available.

Related Topics

• display property — block, flex, grid layout modes
• aspect-ratio — viewport shape media queries
• display-mode — PWA launch context

When to Use grid

Reach for the grid media feature when layout capability matters:

• Progressive enhancement — Start with flexbox; upgrade to multi-column Grid when supported.
• Legacy fallbacks — Target very old browsers that lack Grid (rare today).
• Learning media queries — Understand boolean capability features alongside width/height queries.
• Combined queries — Apply Grid only on wide screens and Grid-capable browsers.
• Maintenance of older codebases — Many projects still use @media (grid) patterns.

Examples Gallery

Practice the grid media feature with two-column layouts, card galleries, dashboard sidebars, and @supports comparisons.

.container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (grid) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 12rem;
  padding: 1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
}

@media (grid) {
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }
  .card {
    flex: unset;
  }
}

.dashboard {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (grid) and (min-width: 48rem) {
  .dashboard {
    display: grid;
    grid-template-columns: 14rem 1fr;
    grid-template-areas: "sidebar main";
    gap: 1.25rem;
  }
  .sidebar { grid-area: sidebar; }
  .main { grid-area: main; }
}

/* Legacy media feature */
@media (grid) {
  .legacy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* Modern @supports */
@supports (display: grid) {
  .modern-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

💬 Usage Tips

• Flexbox first — Write a solid single-column or wrap fallback before Grid enhancements.
• Combine with width — Use (grid) and (min-width: 48rem) for desktop-only Grid layouts.
• Prefer @supports — For new code, @supports (display: grid) is more explicit.
• Reset flex properties — Inside Grid rules, unset flex values on child items when needed.
• Test fallbacks — Verify the non-Grid layout still looks acceptable.

⚠️ Common Pitfalls

• Confusing with display: grid — Media (grid) is a query; display: grid is a declaration.
• Assuming it still matters everywhere — Modern browsers almost always match (grid).
• No fallback layout — Never rely solely on Grid without a flex or block baseline.
• Overusing legacy patterns — New projects can use Grid directly with @supports or baseline Grid.
• Ignoring viewport size — Grid support does not mean “use multi-column on mobile.”

♿ Accessibility

• Logical reading order — Grid reordering must not break screen-reader flow; use source order or order carefully.
• Focus visibility — Grid gaps and overlapping areas should not hide focus outlines.
• Responsive text — Multi-column Grid on small screens can shrink text blocks too narrow.
• Keyboard navigation — Tab order should follow visual layout intent.
• Fallback parity — Ensure flex fallback exposes the same content and controls.

💡 Best Practices