CSS · Lesson 6 of 7
CSS Grid
Two-dimensional layout with rows and columns.
display: grid lays children out in rows and columns.
grid-template-columns: 1fr 2fr— two columns, the second twice as wide.repeat(3, 1fr)— three equal columns.repeat(auto-fit, minmax(160px, 1fr))— as many columns as fit: responsive without media queries.gap— space between cells;grid-column: span 2— make an item wider.
Use Flexbox for a single row or column, Grid for full page or card layouts.
Try it yourself
Edit the code and press Run (or Ctrl/⌘ + Enter). Code runs only in your browser, in a sandbox.
Key points
- fr = a fraction of free space.
- auto-fit + minmax = responsive cards.
- Grid for 2D, Flexbox for 1D.
Quick check
What does repeat(3, 1fr) create?
It defines three columns that each take one equal fraction of the space.
Practice task
Create a responsive grid of job cards that shows 1 column on phones and up to 4 on wide screens without media queries.
Interview corner
Grid vs Flexbox?
Flexbox lays items out in one direction (row or column). Grid controls rows and columns together, which suits page and card layouts.
auto-fit vs auto-fill?
Both create as many tracks as fit. auto-fit collapses empty tracks so items stretch; auto-fill keeps empty tracks.
Further reading
Official documentation, linked for deeper study. These are outside sites; this lesson's text is our own.
Original lesson written by the InfoparkDaily team · © 2026 InfoparkDaily · Free to learn — no paid course or subscription.