CSS Grid Properties Table
| Property | Target | What it does |
|---|---|---|
| display: grid | Container | Enables grid context for all children |
| grid-template-columns | Container | Defines column tracks: repeat(3, 1fr), auto, minmax(100px, 1fr) |
| grid-template-rows | Container | Defines row tracks |
| gap | Container | Spacing between grid cells (row-gap and column-gap) |
| grid-template-areas | Container | Named areas for visual layout: "header header" "sidebar main" |
| justify-items | Container | Aligns items along the inline (row) axis |
| align-items | Container | Aligns items along the block (column) axis |
| grid-column | Item | Start and end line: grid-column: 1 / 3 (spans 2 columns) |
| grid-row | Item | Start and end row line |
| grid-area | Item | Assigns item to a named area from grid-template-areas |
| justify-self | Item | Overrides container justify-items for this item |
| align-self | Item | Overrides container align-items for this item |
CSS Grid Layout is a two-dimensional layout system - rows AND columns simultaneously - designed for page-level structure. Unlike Flexbox (one-dimensional), grid lets you place items at specific intersections of a coordinate system, or draw the entire layout with named areas.
The twelve properties split into two groups: container properties that define the grid structure (grid-template-columns, grid-template-areas, gap, alignment) and item properties that place individual children (grid-column, grid-row, grid-area, justify-self, align-self).
How to use
- Filter by property or target (container/item) to find what you need.
- Click any property to copy it into your CSS.
- Start with grid-template-columns and gap - those two alone handle most layouts.
Frequently asked questions
What is the fr unit in grid-template-columns?
fr stands for free space - it distributes available width proportionally. grid-template-columns: 1fr 2fr means the second column is twice as wide as the first. Unlike percentages, fr accounts for gaps: 1fr 1fr with 20px gap gives each column exactly half of (total width minus 20px).
What is the difference between grid and flexbox?
Grid is two-dimensional - you place items in rows AND columns simultaneously. Flexbox is one-dimensional - items flow in a single direction. Use grid for page-level structure (header, sidebar, main, footer) and flexbox for the components inside (nav items, card contents). They are complementary, not competing.
What is grid-template-areas and why is it powerful?
It lets you draw the layout with text: "header header" / "sidebar main" / "footer footer". Each string is a row, each word is a column area. Items are then placed by name: grid-area: header. This is self-documenting CSS - the layout is readable as ASCII art - and responsive redesign is as simple as changing the string.
Should I learn Grid or Flexbox first?
Flexbox - it is simpler, more widely used in existing code, and covers single-direction layouts that are 80% of daily CSS work. Then learn grid for two-dimensional page structure. Together they replace every float, table and positioning hack ever written for layout.