Grid Templates and Alignment

Grid Layout: Templates and Alignment

The Apartment Building Story

Imagine you are an architect designing an apartment building. Each apartment has rooms like a kitchen, bedroom, bathroom, and living room. You need to decide:

1. Where each room goes (templates)
2. How furniture sits inside each room (alignment)

CSS Grid works exactly like this! Let’s build our apartment together.

1. grid-template-areas: Name Your Rooms

Think of grid-template-areas like drawing a floor plan with room names.

Simple Example

You have a 3x3 grid. You want:

• Header at the top (full width)
• Sidebar on the left
• Main content on the right
• Footer at the bottom (full width)

.apartment {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

What’s Happening?

• Each word is a room name
• Repeat a name to make the room bigger
• Use a . (dot) for empty space

grid-template-areas:
  "header header ."
  "sidebar main main"
  ". footer footer";

The dots are like empty corners in your apartment!

2. Named Grid Lines: Secret Pathways

Imagine your apartment has invisible lines on the floor. You can name these lines to help place furniture.

How It Works

.apartment {
  display: grid;
  grid-template-columns:
    [start] 100px [middle] 200px [end];
  grid-template-rows:
    [top] 50px [center] 100px [bottom];
}

Now you can say:

.sofa {
  grid-column: start / middle;
  grid-row: top / center;
}

Why Use Named Lines?

• Easier to read than numbers
• Makes your code like a treasure map
• “Put the sofa from start to middle!”

3. auto-fill and auto-fit: Smart Room Creation

What if you don’t know how many guests are coming? You need flexible rooms!

auto-fill: Always Make Space

.party-room {
  display: grid;
  grid-template-columns:
    repeat(auto-fill, minmax(100px, 1fr));
}

Analogy: Setting up chairs at a party. Even if only 3 friends come, you keep space for 10 chairs.

auto-fit: Only What You Need

.cozy-room {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(100px, 1fr));
}

Analogy: Same party, but empty chairs disappear. The 3 friends spread out to fill the room!

Quick Comparison

4. justify-items: Left, Right, or Center?

Now let’s put furniture inside each room. justify-items controls the horizontal position.

graph TD
    A["justify-items"] --> B["start - Left side"]
    A --> C["center - Middle"]
    A --> D["end - Right side"]
    A --> E["stretch - Fill entire width"]

Example

.apartment {
  display: grid;
  justify-items: center;
}

Every piece of furniture sits in the center of its room!

5. align-items: Top, Bottom, or Middle?

Same idea, but vertical now. Like choosing if a picture hangs high or low.

.apartment {
  display: grid;
  align-items: start;   /* Top */
  align-items: center;  /* Middle */
  align-items: end;     /* Bottom */
  align-items: stretch; /* Fill height */
}

Real Example

.gallery {
  display: grid;
  align-items: center;
}

All pictures hang at eye level!

6. place-items: The Shortcut

Tired of writing two lines? Use place-items!

/* Instead of this */
align-items: center;
justify-items: center;

/* Write this! */
place-items: center;

Two Values

place-items: start end;
/* First: vertical (align) */
/* Second: horizontal (justify) */

7. justify-content: Move All Rooms

What if your apartment has extra space around all the rooms? justify-content moves the entire grid horizontally.

.building {
  display: grid;
  width: 500px;
  grid-template-columns: 100px 100px;
  justify-content: space-between;
}

Options

graph TD
    A["justify-content"] --> B["start"]
    A --> C["center"]
    A --> D["end"]
    A --> E["space-between"]
    A --> F["space-around"]
    A --> G["space-evenly"]

8. align-content: Move Rows Up or Down

Same but vertical! Controls where rows sit when there’s extra space.

.building {
  display: grid;
  height: 400px;
  grid-template-rows: 50px 50px;
  align-content: center;
}

All your rows float to the middle!

9. place-content: Another Shortcut

Combine align-content and justify-content:

/* Long way */
align-content: center;
justify-content: space-between;

/* Short way */
place-content: center space-between;

Super Short

place-content: center;
/* Centers both ways! */

10. Subgrid: Rooms Inside Rooms

This is the coolest feature! Imagine a room that follows the building’s lines.

The Problem

Normally, a nested grid makes its own rules:

.apartment {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
.room {
  display: grid;
  /* This ignores apartment's columns! */
}

The Solution: Subgrid

.room {
  display: grid;
  grid-column: span 2;
  grid-template-columns: subgrid;
}

Now .room uses the parent’s columns!

Visual Example

Parent Grid:     |  100px  |  200px  |  100px  |

Child (subgrid): |  100px  |  200px  |
                 ↑ Follows parent's lines!

When to Use Subgrid?

• Card layouts with aligned content
• Tables inside tables
• Complex form layouts

Quick Reference Table

Your Confidence Checklist

After learning this, you can:

• Draw floor plans with grid-template-areas
• Name invisible lines for easy placement
• Create responsive grids with auto-fill / auto-fit
• Position items inside cells (justify-items, align-items)
• Position the entire grid (justify-content, align-content)
• Use shortcuts (place-items, place-content)
• Make nested grids follow parent rules with subgrid

You are now a Grid Architect! Go build amazing layouts!