Feature Queries for CSS Grid fallbacks

Feature Queries let you write CSS that only applies when the browser supports a specific CSS feature. They are the recommended way to provide layout fallbacks for older browsers that do not support CSS Grid.

Why fallbacks matter

CSS Grid has excellent support across all modern browsers. The main exception is Internet Explorer 11, which has a partial, non-standard implementation. Depending on your audience, IE11 usage may be near zero — but if you need to support it, @supports is the right tool.

The @supports syntax

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

Styles inside the @supports block are only applied if the browser can parse display: grid. Browsers that don’t understand @supports itself (very old browsers) skip the entire block.

To write a negative condition — styles for browsers that do not support a feature:

@supports not (display: grid) {
  .container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
  }
}

The Feature Queries panel in Site Designer

1. Open the Toolbar and click the Feature Queries icon (it looks like a checklist).
2. Click Add Query to create a new @supports block.
3. Select the CSS property and value you want to test (for example, display: grid).
4. Choose Supports or Does Not Support.
5. Style elements normally — all style changes you make while a Feature Query is active are scoped to that query’s block.

A practical Flexbox fallback for Grid

The most common pattern: use Flexbox as a fallback when Grid is unavailable.

Base styles (no feature query — applies everywhere):

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.item {
  flex: 1 1 300px;
}

Enhanced styles (only when Grid is supported):

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .item {
    flex: unset; /* reset the flex shorthand */
  }
}

This way, browsers with Grid get the precise two-dimensional layout. Older browsers fall back to a flexible wrapping row.

When to skip fallbacks entirely

Skip @supports fallbacks when:

• Your analytics show zero or near-zero legacy browser usage.
• The site is an internal tool where you control the browser environment.
• A slightly different layout in old browsers is acceptable (graceful degradation without explicit fallback code).