The display: grid rule creates a grid container and makes its contents grid items.
The grid-template-columns property creates columns in your grid.
The grid-template-rows property creates rows in your grid.
Separate grid tracks using the grid-row-gap and grid-column-gap properties. grid-gap is the shorthand property
Grid layout introduces a new length unit, fr (or fraction), a flexible unit designed for creating grid tracks that expand and contract based on the free space in the grid.
The CSS Grid repeat() function saves you time and helps keep your CSS maintainable. repeat() offers a shortcut for repeating patterns of tracks, which keeps you from having to write the same values over and over again.
One of the most useful features in Grid Layout is the minmax() function. minmax() lets you set a grid track's minimum and maximum size.
The minmax() function can be used with the repeat() function
Grid layout lets you set items to automatically wrap and adjust to fit their container's width. This lets you create designs that respond to different browser widths.
The Grid Layout repeat notation supports two keywords -- auto-fill and auto-fit -- to help with this.
auto-fill generates as many columns as necessary to fit the items within the grid container width even if it means generating empty tracks.
Auto-fit collapses any empty tracks down to zero pixels so grid items can expand to take up the remaining space.
auto-fit allows you to create a flexible, three-column layout in wide viewports, a two-column layout in medium viewport, and a one column layout out in small screens without having to use media queries.
When you create a grid layout with the grid-template-rows and grid-template-columns properties, you are defining what's called an "explicit grid".
Grid Layout also provides an "implicit grid."
The implicit grid is automatically generated by the grid container to position any extra items outside of the explicit grid.
CSS Grid provides a simple and automated way to control the size and position of implicit tracks.
The grid-auto-rows property controls the size of implicit row tracks
grid-auto-columns controls implicit column tracks.
The default value for grid-auto-flow is row. To switch them to columns, set the value to column