Technical tutorial
Page Library
Technical tutorial
A members-only tutorial layout for coding courses, software training and any technical how-to. It opens with what the reader will build and what they need first, works through numbered steps with each piece of code shown line by line in a box, adds tips and common mistakes in callouts and ends with a challenge task and a way to get feedback. The sample teaches a responsive card grid in CSS. Replace the steps and code with your own lesson, and keep one idea per step so readers never get lost.
Build a responsive card grid with CSS Grid
Card grids are everywhere: product listings, blog archives, team pages. In this tutorial you'll build one that fills the screen on a laptop, drops to two columns on a tablet and stacks on a phone, with no media queries at all.
What you'll build
- A grid of six project cards
- Columns that adjust to the screen by themselves
- Cards of equal height, whatever their content
Before you start
- Finish Lesson 6, An introduction to Grid
- Open the starter project from the Unit 2 folder in the code editor
- Have the browser preview open beside your code
Step by step
-
Look at the HTML
The starter file already has the markup. There's one wrapper with the class cards, and six articles inside it, each with the class card:
...
... Don't change the HTML. Everything in this lesson happens in styles.css.
-
Turn the wrapper into a grid
Add a rule for the wrapper that switches on Grid and puts a gap between the cards:
.cards {
display: grid;
gap: 1.5rem;
}Nothing seems to change yet. A grid with no columns defined is a single column, which is exactly what the page already looked like.
-
Let the browser choose the columns
This one line does the heavy lifting. Add it inside the same rule:
grid-template-columns:
repeat(auto-fill, minmax(16rem, 1fr));Read it from the inside out: each column is at least 16rem wide and can grow to share the leftover space equally (1fr). auto-fill fits in as many of those columns as the width allows. Resize the preview and watch the cards reflow.
-
Style the cards
Give each card some breathing room and a border so the grid is easy to see:
.card {
padding: 1.25rem;
border: 1px solid #d0d7de;
border-radius: 12px;
display: flex;
flex-direction: column;
}Grid already makes every card in a row the same height. Making each card a flex column lets you push its button to the bottom in the next step.
-
Line up the buttons
Cards with longer descriptions push their buttons lower than their neighbors. Fix it by letting the button take up any spare space above it:
.card .button {
margin-top: auto;
}Now every button sits on the same line across the row, however much text is above it.
With only two cards on a wide screen, auto-fill keeps empty column tracks, so the cards stay card-sized. auto-fit collapses the empty tracks, so two cards stretch across the full width. Try swapping them to see the difference.
Common mistakes
My cards overflow the screen on a phone
Your minimum is wider than the screen. Use minmax(min(16rem, 100%), 1fr) so the column can shrink below 16rem when it has to.
Nothing happens when I add grid-template-columns
Check that the rule is on .cards, the wrapper, not on .card. Grid properties go on the parent.
The gap is missing on one side
That's expected. gap only adds space between items, never around the outside. Use padding on the wrapper for that.
Make the first card a "featured" card that spans two columns on wider screens, using grid-column: span 2. Then make sure it still behaves on a phone, where there's only one column. Hint: you will need one media query after all.
When you're done, submit your project to the code review queue. Sam picks three challenge solutions to review live every Tuesday at 6 pm Pacific.
Stuck for more than 20 minutes? Post your code in the Unit 2 channel of the community. Someone usually answers within the hour.
Use this page
Make it yours in a few minutes
- Find it in your Control Panel. Go to Content > Page Library and search for "Technical tutorial".
- Add it to your site. Choose a title and a department. The page arrives as a draft, with its pictures copied to your site and your site's name already in place.
- Change the words and pictures. Open it in the Membergate editor, replace the sample text and images with your own, and make it live when you are ready.