CSS Grid Challenge: Magazine-Style Homepage

Table of Contents

• 🎓 Learning Objectives

• 🎯 Challenge Overview

• 📋 What You're Given

• Layout Requirements

• Your Tasks

• 🔑 CSS Grid Properties You'll Use

• 💡 Hints & Tips For the Main Container Grid

• ✅ How to Know You're Done

• 🚀 Getting Started

• 📚 Resources

• CSS Grid - Quick Reference

🎓 Learning Objectives

By completing this challenge, you'll practice:

• Creating multi-column layouts with CSS Grid

• Using grid-template-columns and grid-template-rows

• Spanning elements across multiple columns

• Creating nested grids

• Using the repeat() function for efficiency

• Understanding fractional units (fr)

• Managing grid gaps and spacing

🎯 Challenge Overview

Your mission is to create a professional magazine-style layout using CSS Grid. You've been provided with the HTML structure and basic styling—your job is to implement the grid layout that brings the design to life.

📋 What You're Given

• HTML file (index.html) - Complete and ready to use

• Starter CSS file (styles-starter.css) - Includes basic styling with TODO comments where you need to add CSS Grid properties

• Target layout reference  - Comp reference to see what you're building

Download and extract asset files (html, css, comp reference.

Layout Requirements

Your final layout should match the target design composition:

1. Header - Full-width banner displaying the magazine title

2. Featured Article - Prominent section that spans the full width of the content area

3. Sidebar - Navigation links in a narrower left column

4. Gallery - Image grid in a wider right column (3 columns of images)

5. Footer - Full-width copyright information

Your Tasks

You need to complete two main grid systems:

Task 1: Main Page Grid (.container)

The container holds three sections: featured article, sidebar, and gallery. You need to define:

• Grid display property - Enable grid layout

• Grid template rows - Define the vertical structure (hint: you need 3 rows)

• Grid template columns - Define the horizontal structure (hint: sidebar should be narrower than the main content)

• Gap - Add spacing between grid items

Task 2: Gallery Grid (.gallery)

The gallery section should display images in a neat grid. You need to define:

• Grid display property - Enable grid layout for the gallery

• Grid template columns - Create equal-width columns (hint: use the repeat() function)

• Gap - Add spacing between images

Task 3: Featured Article Positioning

Make the featured article span across both columns:

• Grid column property - Control how many columns this element spans

🔑 CSS Grid Properties You'll Use

Here are the properties you'll need (but you determine the values!):

• display

• grid-template-rows

• grid-template-columns

• gap

• grid-column

• repeat() function

💡 Hints & Tips For the Main Container Grid

Column Setup:

• Think about proportions: the sidebar should take up less space than the gallery

• Consider using fractional units (fr) to create flexible columns

• A 1:3 ratio works well for sidebar to main content

Row Setup:

• The featured article should size to its content (auto)

• The middle row with sidebar and gallery should fill available space

• You only need to explicitly define what's necessary

Featured Article:

• This element needs to break out of the single-column flow

• Look for a property that lets you span multiple columns

• Think: "How many columns should this cover?"

For the Gallery Grid

Column Structure:

• You want 3 equal-width columns

• There's a function that helps you avoid writing 1fr 1fr 1fr

• The repeat() function takes two arguments: how many times to repeat, and what to repeat

Spacing:

• A smaller gap value works well for image galleries (around 10-15px)

• Too much space can make images feel disconnected

General Tips

• Use your browser's DevTools to inspect the grid

  • Right-click > Inspect

  • Look for the grid overlay visualization

• Start with the main container grid, then work on the gallery

• Don't forget units! gap: 20 won't work, but gap: 20px will

• Test your layout by resizing the browser window

✅ How to Know You're Done

Your layout is complete when:

•  The featured article spans the full width above the sidebar and gallery

•  The sidebar appears in the left column below the featured article

•  The gallery appears in the right column with images arranged in 3 columns

•  All sections have appropriate spacing between them

•  Your layout matches the target design composition

🚀 Getting Started

1. Open target-layout.html in your browser to see the goal

2. Open index.html in your browser to see your starting point

3. Open styles-starter.css in your code editor

4. Look for the /* TODO */ comments

5. Add the appropriate CSS Grid properties and values

6. Refresh your browser to see your changes

7. Repeat until it matches the target!

📚 Resources

If you get stuck, remember these resources:

• MDN: CSS Grid Layout

• CSS-Tricks: A Complete Guide to Grid

• Your browser's DevTools grid inspector

Good luck! Remember: the goal isn't just to complete the layout, but to understand why each property value works. Experiment, break things, and learn!