CSS Grid Basics
What is CSS Grid?
CSS Grid is a powerful 2D layout system for creating complex, responsive layouts. Unlike Flexbox (1D), Grid works with both rows and columns simultaneously.
Creating a Grid Container
Apply display: grid to create a grid container. Direct children
become grid items.
Grid Template Columns
grid-template-columns defines column widths. Use px, %, fr
(fraction), auto, or mix them!
Grid Template Rows
grid-template-rows defines row heights. Works the same
as columns.
Gap (Grid Spacing)
The gap property creates spacing between grid
items. Use row-gap and column-gap for
individual control.
Repeat Function
Use repeat() to avoid repetition:
repeat(3, 1fr) = 1fr 1fr 1fr.
Auto-Fit & Minmax
Combine repeat(auto-fit, minmax(min, max))
for responsive grids that automatically adjust columns!
fr
unit (fraction) divides available space
proportionally. 1fr 2fr means the
second column gets twice the space of the first!
Summary
display: grid- Creates grid containergrid-template-columns- Define column widthsgrid-template-rows- Define row heightsgap- Spacing between grid itemsrepeat(n, size)- Repeat pattern n timesfrunit - Fraction of available spaceminmax(min, max)- Flexible sizing with limits
Quick Quiz
What does the 'fr' unit stand for in CSS Grid?
Enjoying these tutorials?