CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

The Grid Container

We create a grid container by declaring display: grid or display: inline-grid on an element. As soon as we do this, all direct children of that element become grid items.

Grid Tracks

We define rows and columns on our grid with the grid-template-columns and grid-template-rows properties. These define grid tracks. A grid track is the space between any two lines on the grid.

The fr unit is specific to grid and represents a fraction of the available space in the grid container.

Positioning Items

You can position items by line numbers using grid-column-start, grid-column-end, grid-row-start, and grid-row-end. We can use the shorthand grid-column and grid-row to set start and end lines simultaneously.

Best Practices

Use Grid for layout and Flexbox for alignment. Grid is generally better for two-dimensional layouts (rows and columns), while Flexbox is better for one-dimensional layouts (a row or a column).