The grid CSS media feature can be used to test whether the output device uses a grid-based screen.

Most modern computers and smartphones have bitmap-based screens. Examples of grid-based devices include text-only terminals and basic phones with only one fixed font.

Syntax

The grid feature is specified as a <mq-boolean> value (0 or 1) representing whether or not the ouput device is grid-based.

Example

HTML

<p class="unknown">I don't know if you're using a grid device. :-(</p>
<p class="bitmap">You are using a bitmap device.</p>
<p class="grid">You are using a grid device! Neato!</p>

CSS

:not(.unknown) {
  color: lightgray;
}

@media (grid: 0) {
  .unknown {
    color: lightgray;
  }

  .bitmap {
    color: red;
    text-transform: uppercase;
  }
}

@media (grid: 1) {
  .unknown {
    color: lightgray;
  }

  .grid {
    color: black;
    text-transform: uppercase;
  }
}

Result

Specifications

Specification Status Comment
Media Queries Level 4
The definition of 'grid' in that specification.
Candidate Recommendation No change.
Media Queries
The definition of 'grid' in that specification.
Recommendation Initial definition.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes ? Yes ? Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? ? ? ? ? ?

Document Tags and Contributors

Contributors to this page: connorshea, mfluehr, cvrebert, andylampert
Last updated by: connorshea,