Course Notes
Week 4: Advanced Grid & Responsive Design
Advanced Grid & Responsive Design

Advanced Grid & Responsive Design

Introduction

This topic completes your CSS layout mastery by covering advanced Grid techniques and responsive design fundamentals. You will learn how to make layouts semantic with named grid lines and how to adapt your websites to any screen size using media queries.

By the end, you will be able to build layouts that work on phones, tablets, and desktops – all from a single codebase.

Grid Concepts Clarified

Before learning named grid lines, here are some important Grid concepts that often cause confusion:

Grid Lines, NOT Cells!

A 3-column grid has 4 lines, not 3! Grid lines are the boundaries between cells, not the cells themselves.
     1   2   3   4  <- FOUR lines
     |   |   |   |
     +---+---+---+
     | 1 | 2 | 3 |  <- THREE columns/cells
     +---+---+---+

Key points:

  • Grid lines are numbered starting at 1 (not 0!)
  • You are defining boundary lines, not counting columns
  • A 3-column grid has 4 lines (one on each side of each column)

Negative Line Numbers

You can count from the end using negative numbers:

.full-width {
    grid-column: 1 / -1;  /* From first line to LAST line */
}
-1 always means “last line” no matter how many columns you have. This is useful for items that should always span the full width.

Understanding Spanning

A common point of confusion:

.item {
    grid-column: 1 / 3;  /* Spans how many columns? */
}

Answer: This spans 2 columns, not 3!

Think of it as: Start-line / End-line

Line 1     Line 3
   |          |
   +----------+
   | Spans 2  |
   | columns  |
   +----------+

Alternative syntax (less confusing):

.item {
    grid-column: span 2;  /* Just say "span 2 columns"! */
}

Implicit vs Explicit Grid

Explicit Grid: Rows/columns you define with grid-template-rows / grid-template-columns

Implicit Grid: Extra rows/columns created automatically when items overflow

By default, implicit rows collapse to content height. Use grid-auto-rows to control their size.
.container {
    grid-auto-rows: minmax(100px, auto);
    /* Implicit rows: minimum 100px, grows if content is larger */
}

What minmax(100px, auto) means:

  • Rows will be at least 100px tall
  • They will stretch if content needs more space

Named Grid Lines

The Problem with Numbered Lines 

.header {
    grid-column: 1 / 5;  /* What does this mean? Not clear! */
}

Problems:

  • Hard to remember what numbers represent
  • Not self-documenting
  • Easy to make off-by-one errors
  • Mental math required

Named Grid Lines: The Solution

Named grid lines give your grid lines meaningful names, making your code more readable and maintainable.

Syntax:

.container {
    grid-template-columns:
        [name-here] size [another-name] size [final-name];
}

Example:

.container {
    display: grid;
    grid-template-columns:
        [full-start] 1fr
        [content-start] 800px [content-end]
        1fr [full-end];
}

Now you can use semantic names to position items:

.header {
    grid-column: full-start / full-end;    /* Clear and readable! */
}

.content {
    grid-column: content-start / content-end;  /* Self-documenting! */
}

Complete Example: Blog Layout 

.blog-layout {
    display: grid;
    grid-template-columns:
        [full-start] 1fr
        [content-start] 2fr [content-end]
        [sidebar-start] 1fr [sidebar-end full-end];
    grid-template-rows:
        [header-start] auto [header-end]
        [main-start] 1fr [main-end]
        [footer-start] auto [footer-end];
    gap: 20px;
}

.header {
    grid-column: full-start / full-end;
    grid-row: header-start / header-end;
}

.content {
    grid-column: content-start / content-end;
    grid-row: main-start / main-end;
}

.sidebar {
    grid-column: sidebar-start / sidebar-end;
    grid-row: main-start / main-end;
}

.footer {
    grid-column: full-start / full-end;
    grid-row: footer-start / footer-end;
}

When to Use Named Lines

Use named lines when:

  • You have complex layouts with many columns/rows
  • Your code needs to be readable by team members
  • The layout has semantic sections (header, sidebar, content, etc.)

Rule of thumb: If you are writing comments to explain what grid line numbers mean, use named lines instead!

You do not need named lines when:

  • Simple 2-3 column layouts
  • grid-template-areas works better for your use case
  • You are creating quick prototypes

Easy Grid Patterns

Pattern 1: Auto-Responsive Grid (NO media queries needed!) 

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}
This is one of the most useful CSS Grid patterns. It automatically creates as many columns as fit, each at least 250px wide and growing to fill available space. It adapts from 1 column on mobile to 4+ columns on large desktop – no media queries needed!

Use for: Photo galleries, product cards, team profiles, blog posts

Pattern 2: Full-Width Items 

.full-width {
    grid-column: 1 / -1;  /* Spans all columns, no matter how many! */
}

Use for: Headers, footers, featured content that should span the full grid width

Responsive Design with Media Queries

What is Responsive Design?

Responsive design means your website adapts to any screen size, from small phones to large desktop monitors.

Why it matters:

  • 60%+ of web traffic is from mobile devices
  • Google ranks mobile-friendly sites higher
  • Better user experience leads to more engagement

Media Queries

Media queries let you apply different CSS styles at different screen sizes.

Basic Syntax:

@media (condition) {
    /* CSS rules for this screen size */
}

Example:

/* Mobile styles (default - no media query) */
.container {
    grid-template-columns: 1fr;
}

/* Tablet styles (768px and wider) */
@media (min-width: 768px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop styles (1024px and wider) */
@media (min-width: 1024px) {
    .container {
        grid-template-columns: repeat(3, 1fr);
    }
}

Common Breakpoints

DeviceWidth RangeMedia Query
Small Phone320px(default styles)
Phone375px - 767px(default styles)
Tablet768px - 1023px@media (min-width: 768px) { }
Desktop1024px - 1439px@media (min-width: 1024px) { }
Large Desktop1440px+@media (min-width: 1440px) { }
You do not need all breakpoints! Start with just 768px for tablet/medium screens and 1024px for desktop/large screens. Two breakpoints covers 90% of use cases.

Mobile-First Approach

Mobile-first means you write CSS for mobile devices first, then add styles for larger screens.

Why mobile-first?

  • Easier to add features as screen size increases
  • Forces you to prioritize essential content
  • Better performance (mobile devices load less CSS initially)
  • Industry standard approach

Example:

/* Mobile (default - simplest version) */
.nav {
    flex-direction: column;
    padding: 1rem;
}

/* Tablet (add some complexity) */
@media (min-width: 768px) {
    .nav {
        flex-direction: row;
        padding: 1.5rem 2rem;
    }
}

/* Desktop (full features) */
@media (min-width: 1024px) {
    .nav {
        padding: 2rem 3rem;
    }
}

Responsive Units

Use relative units instead of fixed pixels for better responsive design:

UnitDescriptionWhen to Use
pxFixed pixelsBorders, small spacing
%Percentage of parentFlexible widths
remRelative to root font size (16px default)Font sizes, spacing, padding
emRelative to parent font sizeComponent-scoped sizing
vw% of viewport widthFull-width sections
vh% of viewport heightFull-height sections

Best practice: Use rem for most sizing.

.container {
    padding: 2rem;        /* Scales with root font size */
    font-size: 1.125rem;  /* 18px if root is 16px */
    gap: 1.5rem;
}

The Viewport Meta Tag

CRITICAL: Add this to the <head> of every HTML file:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Without this tag: mobile browsers will zoom out to show the full desktop version, your media queries will not work properly, and the site will look tiny on phones.

With this tag: the site displays at the correct size on mobile and media queries work as expected.

Media Query Template

Save this template and use it in every project:

/* ===== MOBILE (default) ===== */
.element {
    /* Simple mobile styles */
}

/* ===== TABLET (768px+) ===== */
@media (min-width: 768px) {
    .element {
        /* Add tablet enhancements */
    }
}

/* ===== DESKTOP (1024px+) ===== */
@media (min-width: 1024px) {
    .element {
        /* Add desktop enhancements */
    }
}

Testing Responsive Designs

The best way to test responsive designs is using browser DevTools.

Open DevTools

Open your site in Chrome or Firefox. Press F12 (or Ctrl+Shift+I / Cmd+Option+I on Mac).

Open the Device Toolbar

Click the Device Toolbar icon (or press Ctrl+Shift+M / Cmd+Shift+M).

Test at Key Widths

Select a device preset OR enter a custom width. Test at these sizes:

  • 375px – iPhone size (mobile)
  • 768px – iPad size (tablet)
  • 1024px – Small laptop (desktop)

Common Patterns

Responsive Card Grid 

/* Mobile: 1 column */
.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Tablet: 2 columns */
@media (min-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

Responsive Navigation 

/* Mobile: stacked vertically */
.nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Desktop: horizontal */
@media (min-width: 768px) {
    .nav {
        flex-direction: row;
        gap: 2rem;
    }
}

Responsive Images 

img {
    max-width: 100%;  /* Never wider than container */
    height: auto;     /* Maintain aspect ratio */
}

Hide/Show Elements 

/* Hide sidebar on mobile */
.sidebar {
    display: none;
}

/* Show sidebar on desktop */
@media (min-width: 1024px) {
    .sidebar {
        display: block;
    }
}

Troubleshooting & Common Mistakes

Named grid lines not working?
  • Make sure the line names are inside square brackets: [name-here]
  • Check that the name in your placement matches the name in your template exactly
  • Remember: you are naming the lines, not the columns
/* Definition: */
grid-template-columns: [full-start] 1fr [content-start] 800px [content-end] 1fr [full-end];

/* Usage must match: */
grid-column: full-start / full-end;
Media queries not working?
  • Check that you have the viewport meta tag in your HTML <head>
  • Use min-width (not max-width) for mobile-first
  • Make sure media queries come after the default styles in your CSS
  • Check for typos in the @media syntax
<!-- Required in <head>: -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Layout looks wrong on mobile?
  • Verify the viewport meta tag is present
  • Test in browser DevTools (F12 > Device Toolbar)
  • Check that your mobile styles are the default (not inside a media query)
  • Look for fixed widths (width: 800px) that should be flexible (width: 100% or max-width)
Grid items overlapping or misaligned?
  • Check your grid-column and grid-row line numbers
  • Remember: grid-column: 1 / 3 spans 2 columns (lines 1 to 3), not 3
  • Use span syntax if line math is confusing: grid-column: span 2
  • Use -1 for the last line: grid-column: 1 / -1 spans the full width
Implicit rows collapsing to tiny height?
  • Add grid-auto-rows: minmax(100px, auto) to your grid container
  • This ensures rows created automatically are at least 100px tall
  • The auto maximum lets them grow if content is larger

Key Takeaways

🎯
  • Grid lines vs cells: A 3-column grid has 4 lines. Numbering starts at 1, and you can use negative numbers (-1 = last line)
  • Spanning: grid-column: 1 / 3 spans 2 columns (boundary lines, not count). Use span 2 for clearer syntax
  • Implicit grid: Use grid-auto-rows: minmax(100px, auto) to handle overflow rows
  • Named grid lines make complex layouts readable and self-documenting
  • Auto-responsive pattern: repeat(auto-fit, minmax(250px, 1fr)) creates responsive grids with no media queries
  • Mobile-first is the industry standard – write mobile styles first, then add min-width queries
  • Just 2 breakpoints cover 90% of use cases: 768px (tablet) and 1024px (desktop)
  • Use relative units (rem, %, vw, vh) instead of fixed pixels
  • The viewport meta tag is required in every HTML file for responsive design to work
  • Browser DevTools (F12 > Device Toolbar) is essential for testing responsive layouts

Additional Resources

Media Queries & Responsive Design

CSS-Tricks: Guide to Media Queries
Comprehensive media query reference
MDN: Responsive Design
Official responsive design guide
web.dev: Responsive Basics
Google’s responsive design guide

Named Grid Lines

MDN: Line-based Placement
Official guide to grid line placement
CSS-Tricks: Naming Grid Lines
Visual guide to named lines

Practice & Games

Flexbox Froggy
Learn Flexbox through a fun game
Grid Garden
Learn Grid through a fun game

Testing Tools

Responsive Design Checker
Test your site at different screen sizes
Am I Responsive?
Screenshot tool for responsive testing