CSS Grid Properties - Live Examples
display: grid;
Defines a grid container enabling grid layout for children.
Example :
1
2
3
grid-template-columns
Specifies the number and size of columns.
Example :
100px
2fr
1fr
grid-template-rows
Specifies the number and size of rows.
Example :
50px
100px
70px
grid-gap (gap)
Sets spacing between rows and columns.
Example :
Gap
Between
Items
grid-column
Controls item’s horizontal placement and span.
Example :
Span 2 cols
Col 3
Col 4
grid-row
Controls item’s vertical placement and span.
Example :
Span 2 rows
Row 1
Row 1
justify-items
Aligns items horizontally inside their grid area.
Example :
Center
Center
Center
align-items
Aligns items vertically inside their grid area.
Example :
Bottom
Bottom
Bottom