It is a CSS property that offers a grid-based layout system, with rows and columns, making it easier to design web pages without floats and positioning.
Example 1: Grid with 2-rows and 4-column.
This can be used as a shorthand property for :
- grid-template-rows : Specifies the size of the rows.
- grid-template-columns : This specifies the size of the columns.
- grid-template-areas : This specifies the grid layout using named items.
- grid-auto-rows : This specifies the auto size of the rows.
- grid-auto-columns : This specifies the auto size of the columns.
- grid-auto-flow : This specifies how to place auto-placed items, and the auto size of the row.
Example 2: This is example for the grid-template-rows and grid-template-columns.
Height of the first row is set to 100px and height of the second row is set to 200px and width of every column is set to 156px.
- CSS | grid-row-gap Property
- CSS | grid-row-end Property
- CSS | grid-gap Property
- CSS | grid-row Property
- CSS | grid-area Property
- CSS | grid-row-start Property
- CSS | grid-column-end Property
- CSS | grid-column Property
- CSS | grid-template Property
- CSS | grid-column-gap Property
- CSS | grid-auto-columns Property
- CSS | grid-template-rows Property
- CSS | grid-template-columns Property
- CSS | grid-template-areas Property
- CSS | grid-column-start Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.