CSS - grid Property

Quiz

CSS grid property is a shorthand property used to declare all explicit and implicit grid properties in one declaration. It's a convenient and concise way to define the grid layout of an element. The grid property is a shorthand for the following individual grid-related properties: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-columns, grid-auto-flow and grid-auto-rows

Syntax

grid: none| grid-template-rows / grid-template-columns | grid-template-areas | grid-template-rows / [grid-auto-flow] grid-auto-columns | [grid-auto-flow] grid-auto-rows / grid-template-columns | initial | inherit;

Property Values

Value	Description
none	It indicates no specific sizing of rows or columns. Default.
grid-template-rows / grid-template-columns	It specifies the number of rows with their heights and the number of columns with their width.
grid-template-areas	It specifies the grid layout with names.
grid-template-rows / grid-auto-columns	It specifies the number of rows with their heights and auto size of the column.
grid-auto-rows / grid-template-columns	It specifies the auto size of rows and specifies the number of columns with their width.
grid-template-rows / grid-auto-flow grid-auto-columns	It specifies the number of rows with their height, the position of auto-placed items and the auto size of columns.
grid-auto-flow grid-auto-rows / grid-template-columns	It specifies how to place auto-placed items, the auto size of the rows, and specifies the number of columns with their width.
initial	It sets the property to its initial value.
inherit	It inherits the property from the parent element.

Examples of CSS Grid Property

The following examples explain the grid property with different values.

Grid Property with Row Height and Column Width

To define rows and columns with their sizes in a grid layout, we specify the height values for rows and width values for columns, separated by a `/` (e.g. 10px 10px / 20px 20px specifies 2 rows of 10px height and 2 columns of 20px width) to the grid property. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid: 150px 100px/ auto auto auto;
         gap: 10px;
         background-color: lightblue;
      }

      .container>div {
         border: 2px solid gray;
         color: white;
         text-align: center;
         padding: 30px 0px;
         margin: 10px;
         background-color: lightcoral;
      }
   </style>
</head>

<body>
   <h2>
      CSS Grid Property
   </h2>
   <p>
      <strong>
         grid: 150px 100px / auto auto auto 
      </strong>; 
      There are two rows: first row's height is 150px,
      second row's height is 100px. There are three 
      columns: all colums have auto width, meaning
      they will be adjusted according to their 
      content.
   </p>
   <div class="container">
      <div>
         Item-1
      </div>
      <div>
         Item-2
      </div>
      <div>
         Item-3
      </div>
      <div>
         Item-4
      </div>
      <div>
         Item-5
      </div>
      <div>
         Item-6
      </div>
   </div>

</body>

</html>

Grid Property with Grid Template Area

To define sizes of certain portion of the grid layout such that elements can be placed in those portions, we provide names to the portions along with their size (e.g. "header header content content " indicates 2 rows and 2 columns) to the grid property. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      .container {
         display: grid;
         grid: "header header header header" 100px
               "sidebar content content content" 100px
               "footer footer footer footer" 100px;
         padding: 10px;
         gap: 20px;
         background-color: lightblue;
      }

      .item1 {
         grid-area: header;
      }

      .item2 {
         grid-area: sidebar;
      }

      .item3 {
         grid-area: content;
      }

      .item4 {
         grid-area: footer;
      }

      .container>div {
         background-color: lightcoral;
         text-align: center;
         color: white;
         padding: 20px;
      }
   </style>
</head>

<body>
   <h2>
      CSS Grid Property
   </h2>
   <p>
      <strong>
         grid: "header header header header 100px
         sidebar content content content 100px
         footer footer footer footer 100px"
      </strong>; 
      There are three rows and four columns. The header
      is first row and takes four columns, sidebar and
      content are second row and take single column 
      and 3 columns respectively and footer is third
      column and takes all four columns. All rows 
      have 100px height.
   </p>
   <div class="container">
      <div class="item1">
         This is header
      </div>
      <div class="item2">
         This is sidebar
      </div>
      <div class="item3">
         This is content
      </div>
      <div class="item4">
         This is footer
      </div>
   </div>

</body>

</html>

Supported Browsers

Property
grid	57	16	52	10	44

css_reference.htm

Print Page