Define your container. All direct children will become grid items.
Define your Grid template.
Explicitly place items, if needed.
Key Takeaways
Like Flexbox, Grid items are defined as the direct children of the container.
Flexbox vs Grid: Flex operates in one direction like a sentence (in row direction) and Grid operates in two dimensions like a spreadsheet.
Unlike Flexbox, grids don’t change axis; columns are always in the up-down direction and rows are left-right.
The grid template is not a part of the DOM. It cannot by styled or targetted with selectors. Its purpose is to guide the positioning of the grid items.
Implicit item placement happens automatically: the browser will place items on the grid in source order. You can control this with various explicit placement properties.
Grid cells cannot take non-rectangular shapes (like a Tetris “L”). They must be rectangular.
Half the grid declarations seem to be shorthand properties.
Open lab-time
Tips for learning
Beginners
Try defining your grid columns using units you already know (px, rem, em, ch, etc), then experiment with fr units.
Define traditional layouts using grid-area and grid-template-areas at first, then redefine the same grid in another project using grid-column, grid-row and the span keyword.
