Code Studio: Flexbox Header and Grid Cards

Lay out a portfolio page the way Flex, Grid, and CSS Layout Techniques describes: Flexbox for the header and navigation, Grid for the content. The page is loaded; you write the layout in the stylesheet.

Make the header a flex container with display: flex, then use justify-content: space-between and align-items: center so your name sits on the left and the links on the right.
Style the navigation links (nav a) so they are white with some space between them.
Make .projects a grid with three equal columns: display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;.
Give each .project card a border, padding and rounded corners.
Make it responsive: add a @media (max-width: 600px) rule that changes the grid to one column. Narrow the preview by resizing your browser window to see it switch.

Think about it: why is Flexbox the right tool for the header but Grid the right tool for the cards?

Make the header a flex container with display: flex, then use justify-content: space-between and align-items: center so your name sits on the left and the links on the right.
Style the navigation links (nav a) so they are white with some space between them.
Make .projects a grid with three equal columns: display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;.
Give each .project card a border, padding and rounded corners.
Make it responsive: add a @media (max-width: 600px) rule that changes the grid to one column. Narrow the preview by resizing your browser window to see it switch.

Think about it: why is Flexbox the right tool for the header but Grid the right tool for the cards?

You do not have permission to attempt this activity.

© Saylor University 2010-2026 except as otherwise noted. Excluding course final exams, content authored by Saylor University is available under a Creative Commons Attribution 3.0 Unported license. Third-party materials are the copyright of their respective owners and shared under various licenses. See detailed licensing information. Saylor University®, Saylor.org®, and Harnessing Technology to Make Education Free® are trade names of the Constitution Foundation, a 501(c)(3) organization through which our educational activities are conducted.