Home / css-grid

CSS Grid Notes

• Learning Resources
• About
• Important Terminology
• Codepen demos

Learning Resources

1. CSS Grid Introduction-Css Tricks

About

CSS grid is a two dimensional model to design layouts and while flex box is a one dimensional model.

Important Terminology

• Grid Container - The element on which display:grid property is applied. It’s direct parent of all the grid items.
• Grid Item - The children of grid container.
• Grid line - The dividing line that makes the structure of the grid
  • column grid lines - vertical grid lines
  • row grid lines - horizontal grid lines
• Grid track - The space between two adjacent grid lines.
• Grid cell - The space between two adjacent rows and two adjacent column grid lines. It’s a single unit of the grid.
• Grid area - The total area surrounded by four grid lines.

Codepen demos

1. Simple Implementation

See the Pen CSS Grid by Aditya Agarwal (@aditya81070) on CodePen.