CSS Grid
The CSS Grid Layout Module offers a two-dimensional grid-based layout system, making it easier to design web pages without having to use tables, floats and positioning (Flexbox is also a very great layout tool, but its one-directional flow has different use cases).
An HTML element becomes a grid container when its display property is set to grid or inline-grid. All direct children of the grid container automatically become grid items.
The spaces between each column/row are called gaps. The lines between rows/columns are called row/column lines. Refer to these line numbers when placing a grid item in a grid container.
The grid-template-columns property defines the number of columns in your grid layout and the width of each column whereas the grid-template-rows property defines the height of each row.
Here is a list of Grid properties:
| Property | Description |
| gap | A shorthand property for the row-gap and the column-gap properties |
| grid | A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties |
| grid-area | Either specify a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties |
| grid-column | A shorthand property for the grid-column-start and the grid-column-end properties |
| grid-row | A shorthand property for the grid-row-start and the grid-row-end properties |
| grid-template-areas | Specifies how to display columns and rows, using named grid items |
| grid-gap | A shorthand property for the grid-row-gap and grid-column-gap properties |
| grid-template-columns | Specifies the size of the columns, and how many columns are in a grid layout |
| grid-template-rows | Specifies the size of the rows in a grid layout |