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

<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>
.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;
}

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
X1657524410.1
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
5757524310.36.0