CSS grid Property

Description

The grid property determines the number, name and width of columns and rows in the grid layout, sets the grid layout template, referring to the names of the element areas that are set using the grid-area property, sets the size of implicitly created rows and columns in the layout grid container, It also allows you to specify how the automatic placement algorithm for implicitly created layout elements works, indicating how they will be placed in the layout grid. It is a shorthand property for the following properties: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns and grid-auto-flow.

Initial value: See individual properties
Applies to: Grid containers
Inherited: No
Media: Visual
Computed value: See individual properties
Animatable: Yes
CSS Version: CSS3
JavaScript syntax: object.style.grid

Syntax

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

Values

<grid-template>Defines the grid-template including grid-template-columns, grid-template-rows and grid-template-areas.
<grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?Sets up an auto-flow by setting the row tracks explicitly via the grid-template-rows property (and the grid-template-columns property to none) and specifying how to auto-repeat the column tracks via grid-auto-columns (and setting grid-auto-rows to auto). grid-auto-flow is also set to column accordingly, with dense if it’s specified. All other grid sub-properties are reset to their initial values.
[ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>Sets up an auto-flow by setting the column tracks explicitly via the grid-template-columns property (and the grid-template-rows property to none) and specifying how to auto-repeat the row tracks via grid-auto-rows (and setting grid-auto-columns to auto). grid-auto-flow is also set to row accordingly, with dense if it’s specified. All other grid sub-properties are reset to their initial values.

Example

HTML

<div class="grid-container">

   <div>A</div>

   <div>B</div>

   <div>C</div>

   <div>D</div>

   <div>E</div>

   <div>F</div>

   <div>G</div>

   <div>H</div>

</div>

<div class="grid-container2">

   <div>A</div>

   <div>B</div>

   <div>C</div>

   <div>D</div>

   <div>E</div>

   <div>F</div>

   <div>G</div>

   <div>H</div>

</div>

CSS

.grid-container,
.grid-container2 {
   display: grid; 
   margin-top: 5px;
   padding: 10px;
   background: rgb(0,150,208); 
}
.grid-container > div,
.grid-container2 > div { 
   background: rgb(241,101,41); 
   border: 1px solid #000;
   text-align: center; 
} 
.grid-container {
   grid: [row1] 1fr [row2] 2fr [row3] 3fr / [col1] 25% [col2] 25% [col3] 25%;
}
.grid-container2 {
   grid: 60px 40px 20px / 1fr 2fr 1fr;
}

Result