Portfolio Step 10: The Page Skeleton

Give your site a real layout. Use Grid for the page skeleton: a header across the top, a content area, and a footer across the bottom. Then turn your project gallery into a grid using auto-fit and minmax so it reflows on any screen without a media query. Keep Flexbox for the pieces inside each region, such as the header bar you built in the last step. When you are done, resize the browser slowly from wide to narrow and watch the gallery drop from four columns to one on its own.