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
- Computed value
- See individual properties
- Animatable
- Yes
- JavaScript syntax
- object.style.grid
Interactive Demo
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
The following table will show you the current browser support for the CSS grid
property.
Desktop | |||||
16 | 57 | 52 | 44 | 10.1 |
Tablets / Mobile | |||||
57 | 52 | 43 | 10.3 | 6 | 57 |
Last updated by CSSPortal on: 2nd January 2024