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
X	16	57	52	44	10.1
Tablets / Mobile
57	57	52	43	10.3	6.0

Last updated by CSSPortal on: 6th November 2019