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; }</style></head><body><h2>.container>div { border: 2px solid gray; color: white; text-align: center; padding: 30px 0px; margin: 10px; background-color: lightcoral; }</h2><p><strong>CSS Grid Property</p><div class="container"><div>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.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></pre>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; }</style></head><body><h2>.container>div { background-color: lightcoral; text-align: center; color: white; padding: 20px; }</h2><p><strong>CSS Grid Property</p><div class="container"><div class="item1">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.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></pre>
Leave a Reply