Adapt layouts for every screen
Use Grid and media queries to make page layouts fit different viewport sizes.
- Create a grid layout
- Use a media query
- Design for narrow screens first
CSS Grid arranges items in rows and columns. A media query applies rules only when a condition, such as viewport width, is true. Together they help a layout adapt from a narrow phone screen to a wide desktop.
1.cards {
2 display: grid;
3 grid-template-columns: 1fr;
4 gap: 16px;
5}
6
7@media (min-width: 700px) {
8 .cards {
9 grid-template-columns: repeat(3, 1fr);
10 }
11}One column on narrow screens, three columns on wider screens
Start with a layout that works on a small screen, then add a breakpoint when the content has room to spread out. Relative units, flexible tracks such as 1fr, and max-width can help content resize without overflowing.
Key takeaways
Grid arranges content in rows and columns.
Media queries apply styles under specific conditions.
Start with a narrow layout and adapt when the content needs it.
Lesson quiz
5 questions · pass with 4 correct · up to 50 XP
Passing this quiz completes the lesson and keeps your streak going. Questions you miss come back in review sessions later.
Practice: write CSS
Style the sample page, see your changes in the sandboxed preview, and run checks against the computed styles.
Make the cards responsive
Use Grid for .cards. It should have one column below 700px and three equal columns at 700px and above.
- Narrow layout
- Wide layout
Your CSS is applied to a sample page in a sandboxed preview. Tests check computed styles.
Questions about this lesson
Stuck? Ask. Figured something out? Share it. Explaining is one of the best ways to learn.
Loading posts…