Complex Grid Layouts Using Grid Area

You have already learned the fundamentals of CSS Grid, including basic grid placement, auto-fill for responsive layouts, and subgrid for nested alignment. This assignment brings those concepts together in three professional layouts that demonstrate when and how to use advanced Grid features. You will implement grid template areas for semantic layout structure, named grid lines for precise positioning, auto-fit for responsive wrapping, and subgrid for content alignment across cards.

Each layout focuses on different Grid capabilities. The magazine layout uses grid template areas and named lines to create an overlapping hero section with semantic structure. The dashboard layout demonstrates auto-fit for truly responsive card grids that adapt without media queries. The portfolio layout solves the exact subgrid problem you learned about: aligning card content across items despite varying content lengths. Together, these layouts represent the types of real production code you will write as a professional developer.

Setup Instructions

Download the starter files and add them to your portfolio repository. The starter package includes three complete HTML files and a CSS structure with detailed TODO comments guiding your implementation. All HTML is complete; your work focuses entirely on implementing Grid layouts in CSS.

1. Download and Extract Starter Files

Download complex-grid-starter.zip and extract it. The package contains:

        complex-grid-starter/
        ├── css/
        │   ├── base/               # complete, do not modify
        │   ├── components/         # complete, do not modify
        │   ├── layout/
        │   │   ├── magazine.css    # your work here
        │   │   ├── dashboard.css   # your work here
        │   │   └── portfolio.css   # your work here
        │   └── main.css            # complete, imports everything
        ├── magazine.html           # complete, do not modify
        ├── dashboard.html          # complete, do not modify
        ├── portfolio.html          # complete, do not modify
        └── README.md               # detailed instructions
    

2. Add to Your Portfolio Repository

Create a new directory in your portfolio repository and move the extracted files there. Your portfolio structure should look like this:

        portfolio/
        └── unit-3/
            └── complex-grid-layouts/
                ├── css/
                ├── magazine.html
                ├── dashboard.html
                ├── portfolio.html
                └── README.md
    

3. Open Files and Review

Open each HTML file in your browser to see the current unstyled state. Read through the TODO comments in each CSS layout file to understand what you need to implement. The README file contains detailed explanations, common pitfalls, and testing strategies for each layout.

Layout 1: Magazine (Grid Template Areas and Named Lines)

The magazine layout demonstrates two powerful Grid features: template areas for semantic structure and named grid lines for precise positioning. You will create a magazine-style page with an overlapping hero section where content overlays a background image, creating the engaging visual style common in editorial design.

Understanding Grid Template Areas

Grid template areas provide a visual, declarative way to define layout regions. Instead of positioning items with line numbers, you name areas and assign elements to those named regions. The syntax creates a visual representation of your layout directly in the CSS, making it easy to understand the structure at a glance.

        .magazine-container {
            display: grid;
            grid-template-areas: 
                "feature feature"
                "article sidebar";
            grid-template-columns: 2fr 1fr;
            gap: var(--spacing-xl);
        }

        .feature-section { grid-area: feature; }
        .article-section { grid-area: article; }
        .sidebar { grid-area: sidebar; }
    

This creates a layout where the feature section spans the full width at the top, while the article takes two-thirds of the width below and the sidebar takes one-third. The template areas must form a rectangle; you cannot create L-shaped or T-shaped regions.

Understanding Named Grid Lines

Named grid lines extend Grid's power by letting you define semantic names for the lines separating tracks. Instead of referring to line numbers, you use meaningful names that describe what the lines represent. This becomes essential when creating overlapping content or precise positioning.

        .feature-section {
            display: grid;
            grid-template-columns: 
                [full-start] 1fr 
                [content-start] 2fr 
                [content-end] 1fr 
                [full-end];
            grid-template-rows: 
                [top] 300px 
                [middle] 200px 
                [bottom];
        }

        .feature-image {
            grid-column: full-start / full-end;
            grid-row: top / bottom;
        }

        .feature-content {
            grid-column: content-start / content-end;
            grid-row: middle / bottom;
        }
    

The image spans from the full-start line to the full-end line, covering the entire width. The content starts at content-start and ends at content-end, creating a narrower column. Because the content occupies rows from middle to bottom while the image occupies rows from top to bottom, they overlap. This creates the magazine effect where text overlays the image.

Implementation Requirements

Work in css/layout/magazine.css and implement the following:

• Use grid-template-areas to define the main page structure with areas for feature, article, and sidebar
• Create named grid lines in the feature section to control image and content positioning
• Position the feature image to span the full width and height using named lines
• Position the feature content to overlap the image in the lower portion using named lines
• Add a media query for mobile that stacks all sections vertically and simplifies the feature grid

Layout 2: Dashboard (Auto-Fit for Responsive Grids)

The dashboard layout demonstrates how repeat(auto-fit, minmax()) creates truly responsive grids that adapt without media queries. You learned the difference between auto-fill and auto-fit in your reading; this layout shows why auto-fit is typically the better choice for dashboard card grids.

Auto-Fit Behavior

Auto-fit creates as many tracks as will fit based on the minimum size in your minmax function, then collapses any empty tracks and allows items to expand. This means cards grow to fill available space rather than leaving empty columns when you have fewer items than would fill the grid.

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: var(--spacing-lg);
        }
    

On a 1200px wide viewport, this creates as many 250px columns as will fit, then distributes the remaining space equally among them. If you only have three stat cards, they expand to fill the space rather than leaving an empty fourth column. As the viewport narrows, cards automatically wrap to the next row when they can no longer fit at their minimum width.

Mobile-Friendly Minmax

A critical detail for mobile devices: if your minimum width is wider than the viewport, cards will overflow horizontally. The solution uses the min() function inside minmax to ensure the minimum never exceeds 100% of the container width.

        grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    

This technique guarantees cards work on any screen size. On wide screens, the minimum is 250px. On a 320px phone, the minimum becomes 100% of that 320px, preventing overflow.

Deciding Against Subgrid

This assignment asks you to consider whether the dashboard layout needs subgrid. The activity cards contain titles, images, descriptions, and metadata. Should this content align across cards like in the portfolio layout? The answer reveals an important lesson: subgrid solves specific problems where content alignment matters. Dashboard cards are often independent modules where alignment across cards is not a design goal. Understanding when NOT to use subgrid is as important as knowing when to use it.

Implementation Requirements

Work in css/layout/dashboard.css and implement the following:

• Create a stats grid using repeat(auto-fit, minmax(min(250px, 100%), 1fr))
• Create an activity cards grid using repeat(auto-fit, minmax(min(350px, 100%), 1fr))
• Test at various viewport widths to verify automatic wrapping behavior
• Consider and document why this layout does not require subgrid

Layout 3: Portfolio (Subgrid for Content Alignment)

The portfolio layout demonstrates the exact problem subgrid was designed to solve: aligning content across cards when card children are independent grid items. This is the scenario you learned about in the subgrid reading, where nested grids normally create independent track systems that prevent alignment.

The Alignment Problem

Without subgrid, each portfolio card establishes its own internal grid based solely on that card's content. A card with a long title creates a taller title row than cards with short titles. A card with a long description pushes its button further down than cards with short descriptions. Even though the cards themselves align in the parent grid, their internal content does not align horizontally across cards. This creates a visually chaotic layout where nothing lines up.

The Subgrid Solution

Subgrid solves this by allowing nested grids to inherit track definitions from their parent. The parent grid defines explicit row tracks for the card structure: title row, image row, description row, footer row. Each card then uses grid-template-rows: subgrid to inherit those tracks instead of creating independent tracks.

        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
            grid-auto-rows: auto 250px 1fr auto;
            gap: var(--spacing-lg);
        }

        .portfolio-card {
            display: grid;
            grid-row: span 4;
            grid-template-rows: subgrid;
            gap: var(--spacing-sm);
        }
    

The parent defines four row tracks. Each card spans those four rows and uses subgrid to inherit them. Now all titles occupy the same row track across all cards, all images occupy the same row track, and so on. Perfect alignment regardless of content length.

Alignment in Flexible Rows

The description row uses 1fr, making it flexible to accommodate varying description lengths. Without additional alignment, content in a 1fr track might center vertically within that expanded space. Use align-self: start on the description to keep it anchored at the top of its row, maintaining clean alignment across cards.

Progressive Enhancement with @supports

Subgrid support is excellent in modern browsers but you should still provide fallback behavior. Use the @supports rule to detect subgrid support and enhance accordingly.

        .portfolio-card {
            display: grid;
            grid-template-rows: auto auto 1fr auto;
        }

        @supports (grid-template-rows: subgrid) {
            .portfolio-grid {
                grid-auto-rows: auto 250px 1fr auto;
            }
            
            .portfolio-card {
                grid-row: span 4;
                grid-template-rows: subgrid;
            }
        }
    

Browsers without subgrid support display independent card grids that work fine but lack perfect alignment. Browsers with subgrid support get the enhanced aligned layout. This pattern ensures your layout works for everyone while providing the best experience where possible.

Implementation Requirements

Work in css/layout/portfolio.css and implement the following:

• Create a parent grid with columns using repeat(auto-fit, minmax(min(320px, 100%), 1fr))
• Define explicit row tracks on the parent using grid-auto-rows: auto 250px 1fr auto
• Make each card span 4 rows and use grid-template-rows: subgrid
• Add align-self: start to the card description for proper alignment in the flexible row
• Wrap the subgrid code in @supports (grid-template-rows: subgrid) for progressive enhancement
• Test by temporarily commenting out the subgrid code to see the alignment problem it solves

Testing and Verification

Each layout requires specific testing to verify correct implementation. Use your browser's DevTools Grid Inspector to visualize grid tracks, areas, and lines.

Magazine Layout Testing

• Verify the feature section uses grid template areas and appears in the correct location
• Check that the feature image spans the full width and height of the feature section
• Confirm the feature content overlaps the lower portion of the image
• Resize to mobile width (below 768px) and verify vertical stacking
• Use DevTools Grid Inspector to view named grid lines in the feature section

Dashboard Layout Testing

• Resize the browser to various widths and watch cards automatically wrap
• Test on a narrow width (around 400px) to verify cards do not overflow
• Temporarily change auto-fit to auto-fill and observe the different behavior
• Verify that with fewer cards, they expand to fill available space rather than leaving empty columns

Portfolio Layout Testing

• Examine content alignment across cards: titles, images, descriptions, and footers should all align horizontally
• Temporarily comment out the subgrid code and refresh to see the alignment problem
• Re-enable subgrid and verify alignment is restored
• Use DevTools to inspect the grid structure and verify cards inherit parent row tracks
• Test the @supports rule by checking if the fallback code works without subgrid support

Key Concepts Review

This assignment brings together several advanced Grid concepts you have learned throughout the unit:

• Grid Template Areas: Semantic, visual layout structure that makes CSS readable and maintainable. Use when you want to define layout regions by name rather than by line numbers.
• Named Grid Lines: Precise positioning using meaningful line names rather than numbers. Essential for creating overlapping content and complex positioning that needs to be clear and maintainable.
• Auto-Fit: Responsive grid columns that automatically wrap and expand to fill available space. Use for dashboard cards, galleries, or any layout where items should grow to use available space and empty tracks should collapse.
• Mobile-Friendly Minmax: Using min() inside minmax to prevent overflow on narrow viewports. Critical for responsive layouts that work on all device sizes without horizontal scrolling.
• Subgrid: Aligning nested grid content across parent grid tracks. Solves the specific problem of keeping card content aligned when cards have varying content lengths. Use when alignment across items matters; skip when items are independent.
• Progressive Enhancement: Using @supports to provide fallback layouts for browsers without full Grid support while enhancing the layout where features are available.

Understanding when to use each technique comes from recognizing the specific problems they solve. Grid template areas make structure semantic. Named lines enable precise overlapping. Auto-fit creates flexible responsive layouts. Subgrid aligns nested content. Together, these techniques give you powerful tools for creating professional, production-quality layouts.

Assignment Submission

When you have completed all three layouts, test them thoroughly at various viewport sizes, then complete the submission form below. The form will guide you through documenting your implementation decisions and understanding of the concepts. Download the PDF and submit it via Canvas along with a link to your portfolio.