Extra (Grid)
Introduction
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
To use CSS grid properties, set grid value to display property in extra section.
Grid Properties
| Property | Values | Description |
|---|---|---|
| Columns | number |
Specifies the number (and the widths) of columns in a grid layout. |
| Rows | number |
Specifies the number (and the heights) of the rows in a grid layout. |
| Align | stretch, center, flex-start, flex-end, space-between, space-around | Align a flex container’s lines within it when there is extra space in the cross-axis. |
| Justify | flex-start, flex-end, center, space-between, space-around | aligns the flexible container’s items when the items do not use all available space on the main-axis (horizontally). |
| Column Gap | number | Defines the size of the gap between the columns in a grid layout. |
| Row Gap | number | Defines the size of the gap between the rows in a grid layout. |
Was this article helpful?
YesNo