Grid Layout
Build powerful rows and columns with CSS Grid and create layouts that adapt to available space.
grid-template-columns: repeat(3, 1fr);
>_ What Is CSS Grid?
CSS Grid is a layout system designed for arranging elements into rows and columns. Instead of manually positioning every item, you define the grid and let the browser organize the layout.
Grid is especially useful for layouts such as photo galleries, dashboards, product listings, portfolios, feature sections, and groups of cards.
Grid Container
Turns an element into a grid that can organize its direct children.
Columns
Define how many vertical sections the layout should contain.
Rows
Grid automatically creates new rows as additional items are added.
Gap
Creates consistent spacing between grid rows and columns.
>_ Create Your First Grid
Start by setting the parent element’s display property to grid.
display: grid;
}
The element with .grid becomes the
grid container. Its direct child
elements become grid items.
>_ Creating Columns
The grid-template-columns property defines the columns in your grid.
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
>_ Meet the fr Unit
Grid introduces a useful unit called fr, which stands for a fraction of available space.
1fr 1fr
Creates two equal columns. Each receives one fraction of the available space.
1fr 1fr 1fr
Creates three equal columns.
2fr 1fr
Creates two columns where the first gets twice as much available space as the second.
1fr 2fr 1fr
Creates three columns with a wider center column.
>_ The repeat() Function
Writing the same value repeatedly can get tedious. CSS Grid gives us repeat().
display: grid;
grid-template-columns: repeat(3, 1fr);
}
This means: repeat a 1fr column three times.
>_ Add Space with gap
The gap property creates space between grid items without adding margins to every individual item.
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
gap belongs to the grid container
and creates consistent spacing
between the items. You don’t
need to add margins to every card.
>_ A Responsive Grid
Here’s where Grid becomes especially powerful. We can tell the browser to create as many columns as will comfortably fit.
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(160px, 1fr));
gap: 15px;
}
auto-fit
Lets the browser fit as many columns as possible into the available space.
minmax(160px, 1fr)
Each column should be at least 160px wide, but may expand to share available space.
With auto-fit and
minmax(), a grid can adjust
its number of columns as the available
width changes — often without needing a
media query for that particular layout.
>_ Quick Reference
display: grid;
Turns an element into a grid container.
grid-template-columns
Defines the number and sizes of grid columns.
1fr
Represents one fraction of the available space.
repeat()
Repeats a column or row pattern.
gap
Controls spacing between grid items.
minmax()
Defines a minimum and maximum track size.
Build a Coding Dashboard
Use CSS Grid to arrange six coding cards into a clean, responsive layout.
-
✓
Turn
.dashboardinto a grid using display: grid. - ✓ Create responsive columns using repeat(), auto-fit, and minmax().
- ✓ Add a gap between the cards.
- ✓ Keep every card at least 150px wide.
- ✓ Change the minimum card width and observe how the number of columns changes.
Grid Layout Challenge
What You’ve Learned
display: grid creates
a grid container.
grid-template-columns
controls the grid’s columns.
fr distributes available
space between grid tracks.
repeat() makes repeated
column definitions easier to write.
gap creates consistent
spacing between grid items.
auto-fit and
minmax() can create
flexible responsive grids.
Nice work!
Finished this lesson? Mark it complete to track your progress.