reading-notes

A Complete Guide To Grid

Reading

• A Complete Guide To Grid

Notes

What is Grid?

• Grid is a two-dimensional layout, compared to Flexbox’s one-dimensional layout
• display: grid; defines the grid container
• grid-template-columns & grid-template-rows set the width and height, respectively
• The order of your columns and rows doesn’t matter, as CSS can make them display in any order

Key Grid Terms

• Grid Container
  • The element on which the display is applied
  • It is the direct parent of all grid items
• Grid Item
  • The children elements of the container
• Grid Line
  • The dividing lines that make up the structure of the grid
• Grid Cell
  • Space between two adjacent row and two adjacent column grid lines
• Grid Track
  • The columns or rows of the grid