CSS grid Media Feature

Definition and Usage

The grid media feature tests whether the output device uses a grid-based screen (for example a text terminal) instead of a typical bitmap screen.

Most phones and monitors are bitmap devices and match grid: 0. Grid-based examples include text-only terminals and basic phones with one fixed font. This is not a test for CSS Grid layout (display: grid / grid).

CSS Syntax

Boolean form: @media (grid) { … } matches when the value is 1 (grid-based). Always wrap the feature in parentheses.

Feature Values

How to Use grid

Keep bitmap-friendly defaults, then optionally adapt for rare grid devices.

1. Write normal styles that work on bitmap screens (almost every modern device).
2. Optional: use @media (grid: 0) for bitmap-only emphasis.
3. Optional: use @media (grid: 1) or @media (grid) for terminal-style tweaks (simpler type, fewer effects).
4. Never use this query to decide whether to apply display: grid.

Live Preview

This device’s grid value via matchMedia. On a normal monitor or phone you should see grid: 0.

CSS Examples

Each snippet focuses on the grid media feature (device type), not CSS Grid layout. Use Try It Yourself for a live editor.

<style>
  .bitmap {
    color: #64748b;
  }

  @media (grid: 0) {
    .bitmap {
      color: #dc2626;
      text-transform: uppercase;
    }
  }
</style>

<p class="bitmap">You are using a bitmap device.</p>

<style>
  .grid-device {
    color: #64748b;
  }

  @media (grid: 1) {
    .grid-device {
      color: #0f172a;
      text-transform: uppercase;
    }
  }
</style>

<p class="grid-device">You are using a grid device!</p>

<style>
  .bitmap,
  .grid-device {
    color: #cbd5e1;
  }

  @media (grid: 0) {
    .bitmap {
      color: #dc2626;
      text-transform: uppercase;
    }
  }

  @media (grid: 1) {
    .grid-device {
      color: #0f172a;
      text-transform: uppercase;
    }
  }
</style>

<p class="bitmap">You are using a bitmap device.</p>
<p class="grid-device">You are using a grid device!</p>

Key Takeaways