Css Module 32

  Module 32 : CSS Subgrid – Advanced Nested Grid Structures

1. Introduction to CSS Grid and the Need for Subgrid

Before diving into subgrid, recap:

CSS Grid allows for two-dimensional layouts (rows and columns).

Grid children (items inside a grid container) do not automatically inherit the grid structure of their parent.

In complex layouts, this makes nested grids hard to maintain and align.

Problem Example:

css

code

.parent { display: grid; grid-template-columns: 1fr 2fr 1fr; } .child { display: grid; grid-template-columns: 1fr 1fr; /* No relation to parent columns */ }

Solution: Subgrid allows a child element to inherit the grid lines of the parent grid.

2. Enabling Subgrid – Syntax and Usage

css

code

.parent { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: auto auto; } .child { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-rows: subgrid; }

display: grid defines the child as a grid.

grid-template-columns: subgrid means it uses the parent’s column lines.

Similarly, grid-template-rows: subgrid aligns the rows.

3. Practical Method: Creating a Nested Grid Layout

     

   

Use Case: Article Layout with Subgrid

HTML:

html

 code

<div class="article"> <div class="header">Title</div> <div class="meta"> <div>Author</div> <div>Date</div> <div>Category</div> </div> <div class="content">Lorem ipsum...</div> </div>

CSS:

css

code

.article { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto 1fr; gap: 10px; } .meta { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }

Explanation:

.article has a grid with 3 columns.

.meta spans the full width and inherits the columns using subgrid.

It aligns perfectly with the .header and .content.

4. Key Use Cases and Benefits of Subgrid

Use Case

Description

Consistent alignment

Ensures nested elements align with parent grid lines

Modular layout

Encourages reusability without redefining grid

Cleaner code

Avoids duplication of column definitions

Responsive design

Automatically adapts to parent grid's responsive behavior

5. Exercises

Exercise 1: Create a Two-Column Card Layout

Objective: Build cards that align their headers and footers across multiple cards using subgrid.

HTML:

html

code

<div class="card-grid"> <div class="card"> <div class="card-header">Header</div> <div class="card-body">Content</div> <div class="card-footer">Footer</div> </div> <div class="card"> <div class="card-header">Header</div> <div class="card-body">Content</div> <div class="card-footer">Footer</div> </div> </div>

CSS:

css

 code

.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .card { display: grid; grid-template-rows: subgrid; grid-row: span 3; }

Expected Result: All card headers and footers align perfectly.

Exercise 2: Blog Layout with Subgrid Alignment

Create a blog layout where the author, tags, and read time align across all entries.

Use subgrid to structure the metadata.

Add responsive behavior (media queries).

Make sure spacing remains consistent.

6. Subgrid vs Nested Grid

Feature

Nested Grid

Subgrid

Inherits columns/rows

No

Yes

Maintains alignment

No

Yes

Flexibility

More flexible

More structured

Ideal use case

Custom layouts

Reusing parent structure

7. Limitations and Browser Support

Currently supported in Firefox (full), Safari (partial), Chrome (experimental behind flags).

Always check support before using in production.

Use progressive enhancement with feature queries.

css code

@supports (grid-template-columns: subgrid) { .child { grid-template-columns: subgrid; } }

8. Lecture and Teaching Tips

Start with limitations of nested grids without subgrid.

Use visual guides: show parent grid lines and how subgrid aligns to them.

Interactive tools: CodePen/Playground with toggles to show before/after subgrid.

Discuss real-world layouts: dashboards, article metadata, product cards.

Encourage modular thinking: subgrid encourages reusable design patterns.

9. Final Project Idea for Students

Build a Responsive Dashboard Layout

Use a main grid for layout areas (sidebar, content, footer).

Use subgrid inside content cards to align headers/footers.

Add responsiveness using media queries.