CSS - Grid

CSS grid property is a shorthand property used to declare all explicit and implicit grid properties in one line.

Possible Values

  • <grid-template> − Sets the grid layout using the grid-template-columns, grid-template-rows, and grid-template-areas properties.

  • <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>

    − Use the grid-template-rows property to explicitly define row tracks (while setting grid-template-columns to none) and grid-auto-columns to specify the grid-auto-rows property to set the grid-auto-columns' automatic repetition to auto, you can generate an automatic flow. Additionally, set grid-auto-flow to column, with dense if desired.

  • [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>

    − Set grid-auto-flow to row and, if needed, use the dense option.

Applies to

All the HTML elements.

DOM Syntax

object.style.grid = "<grid-template>|<grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>| [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>";

CSS Grid - <grid-template>

The following example demonstrates that grid: 100px/ 200px the grid with rows of height 100px and columns of width 300px. 

<html>
<head>
<style>
   .grid-box {
      display: grid;
      grid: 100px / 200px; 
      gap: 10px;
   }
   .grid-box > div {
      background-color: red;
      border: 3px solid lightgreen;
      padding: 10px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="grid-box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
   </div>
</body>
</html>

The following example demonstrates that the use of grid: minmax(400px, min-content) / repeat(auto-fill, 50px) property.

  • minmax(400px, min-content) use for row sizing, each row is at least 200px wider and expand to fits its content.

  • repeat(auto-fill, 50px) use to create as many columns as can fit within the container with each column having a fixed width of 50px.

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid: minmax(200px, min-content) / repeat(auto-fill, 50px);
      color: white;
      text-align: center;
   }
   .grid-container > div {
      background-color: red;
      border: 2px solid lightgreen;
      height: 50px;
      width: 50px;
      margin: 10px;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Grid item 1</div>
      <div>Grid item 2</div>
      <div>Grid item 3</div>
      <div>Grid item 4</div>
      <div>Grid item 5</div>
      <div>Grid item 6</div>
   </div>
</body>
</html>

CSS Grid - <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>

The following example demonstrates that the use of grid: 100px /auto auto auto property sets the grid to have 4 columns, each column is 100px wide and auto keyword automatically size the remaining columns to fill the available space −

<html>
<head>
<style type="text/css">
   .grid-container {
      display: grid;
      grid: 100px /auto auto auto;
      color: white;
      width: 360px;
      border: 2px solid rgb(29, 231, 80);
   }
   .grid-container > div {
      background-color: rgb(228, 9, 9);
      border: 2px solid rgb(29, 231, 80);
      padding: 10px;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Grid item 1</div>
      <div>Grid item 2</div>
      <div>Grid item 3</div>
      <div>Grid item 4</div>
      <div>Grid item 5</div>
      <div>Grid item 6</div>
   </div>
</body>
</html>

The following example demonstrates that the use of grid: 20% / auto auto auto dense property, first column should occupy 20% of the available width, auto keyword automatically size the remaining columns to fill the available space and dense keyword tries to fit as many grid items as possible without leaving gaps −

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid: 20% / auto auto auto dense;
      color: white;
      width: 300px;
      border: 2px solid rgb(29, 231, 80);
   }
   .grid-container > div {
      background-color: rgb(228, 9, 9);
      border: 2px solid rgb(29, 231, 80);
      padding: 10px;
   }
</style>
</head>
<body>
   <div class="grid-container">
      <div>Grid item 1</div>
      <div>Grid item 2</div>
      <div>Grid item 3</div>
      <div>Grid item 4</div>
      <div>Grid item 5</div>
      <div>Grid item 6</div>
   </div>
</body>
</html>

CSS Grid - [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>

The following example demonstrates that the use of grid: auto 150px / repeat(3, 100px) property, the first row will automatically adjust their height based on the content, while the height of the second row is fixed at 150px. The width of each column is fixed at 100px −

<html>
<head>
<style>
   .grid-container {
      display: grid;
      grid: auto 150px / repeat(3, 100px);
      color: white;
      width: 300px;
      border: 2px solid rgb(29, 231, 80);
   }
   .grid-container > div {
      background-color: rgb(228, 9, 9);
      border: 2px solid rgb(29, 231, 80);
      padding: 10px;
   }
</style>
</head>
   <div class="grid-container">
      <div>Grid item 1</div>
      <div>Grid item 2</div>
      <div>Grid item 3</div>
      <div>Grid item 4</div>
      <div>Grid item 5</div>
      <div>Grid item 6</div>
   </div>
</body>
</html>
Advertisements