CSS Media Features - Grid

CSS grid media feature is used to check if the user device or screen supports grid layout.

The grid media feature can be used to apply different styles to grid-based devices, such as televisions and some mobile phones.

Possible Values

  • <mq-boolean> − It shows whether or not the device uses a grid layout. This indicates that the value 0 means the output device is not grid-based, while the value 1 indicates that the output device is based on a grid system.

Syntax

grid: <mq-boolean>
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.

CSS grid - zero Value

The following example demonstrates grid: 0 media feature. Background color of the element changes to green and text color to white for non-grid based devices −

<html>
<head>
<style>
   .box {
      width: 150px;
      height: 100px;
      background-color: violet;
   }
   @media (grid: 0) {
      .box {
         background-color: green;
         color: white;
      }
   }
</style>
</head>
<body>
   <div class="box">Media Fetaure grid: 0</div>
</body>
</html>

CSS grid - One Value

The following example demonstrates grid: 1 media feature. The background color of the element turns violet for grid based devices −

<html>
<head>
<style>
   .box {
      width: 150px;
      height: 100px;
      background-color: violet;
   }
   @media (grid: 1) {
      .box {
         background-color: green;
         color: white;
      }
   }
</style>
</head>
<body>
   <div class="box">Media Fetaure grid: 1</div>
</body>
</html>
Advertisements