CSS Grid Advanced

Grid Item Spanning

By default, each grid item occupies one column and one row. However, CSS Grid allows you to make an item span across multiple columns or rows.

This is useful when you want to create layouts where certain elements are larger than others, such as a featured card, banner, header, or content section.

Example:

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.box1 {
    grid-column: 1 / 3;
}

👉 This means:

• Start at column line 1
• End at column line 3

So it spans 2 columns

Spanning Rows

.box2 {
    grid-row: 1 / 3;
}

Now this item spans 2 rows.

Using span Keyword

Instead of writing:

grid-column: 1 / 3;

You can write:

grid-column: span 2;

This means:

• Take 2 columns from current position

Much cleaner and beginner friendly.

grid-template-areas (Very Powerful 🔥)

This is where Grid becomes amazing.

CSS

.grid-container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas:
        "header header"
        "sidebar content"
        "footer footer";
}

Now assign areas:

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

.footer {
    grid-area: footer;
}

This creates a full website layout easily.

Real Website Layout Example

HTML

<div class="grid-container">
    <div class="header">Header</div>
    <div class="sidebar">Sidebar</div>
    <div class="content">Main Content</div>
    <div class="footer">Footer</div>
</div>

This is how modern layouts are built.

Auto-fill & Auto-fit

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

What this does:

• Minimum width = 200px
• Maximum = 1fr
• Automatically adjusts based on screen size

🔥 This is very powerful for responsive design.

grid-auto-flow

By default, CSS Grid places items row by row.

But you can control this behavior using grid-auto-flow.

.grid-container {
  display: grid;
  grid-auto-flow: row;
}

Values:

• row → Default (fills rows first)
• column → Fills columns first
• dense → Fills empty gaps automatically

Example:

.grid-container {
  grid-auto-flow: dense;
}

👉 dense tries to fill gaps created by larger items.
This is useful in dynamic layouts like image galleries.

justify-content vs justify-items

These properties are often confusing for beginners.

justify-items

Controls alignment of items inside each grid cell.

.grid-container {
  justify-items: center;
}

justify-content

Controls alignment of the entire grid inside the container.

.grid-container {
  justify-content: center;
}

Quick Difference

👉 Use justify-items for item alignment
👉 Use justify-content for grid positioning

place-items

Instead of writing multiple alignment properties, you can use place-items.

.grid-container {
  place-items: center;
}

👉 This is equivalent to:

align-items: center;
justify-items: center;

This makes your code shorter and cleaner.

Auto-Fill vs Auto-Fit

You already used auto-fit, but let’s understand both properly.

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Difference:

• auto-fit
  → Expands items to fill available space
• auto-fill
  → Keeps empty columns even if space is available

👉 In most real projects, auto-fit is preferred because it creates flexible layouts.

Common Mistakes (Avoid These)

• ❌ Using Grid for simple alignment (use Flexbox instead)
• ❌ Not understanding grid lines ( Leads to wrong placement )
• ❌ Overusing fixed sizes (like px) ( Breaks responsiveness )
• ❌ Ignoring minmax() ( Layout becomes less flexible )
• ❌ Mixing up justify-items and justify-content
• ❌ Not using gap and manually adding margins

Important Points to Remember

• CSS Grid is two-dimensional (rows + columns)
• Use fr units for flexible layouts
• Use repeat() to write cleaner code
• Use span when you don’t want to depend on exact grid lines
• Combine Grid + Flexbox for best results
• Use auto-fit + minmax() for responsive design
• Use grid-template-areas for clean layout structure
• Practice real layouts to truly understand Grid

🎯 Practice Task

Task 1: Grid Item Spanning

Create a grid with 3 equal columns using:

grid-template-columns: repeat(3, 1fr);

Now:

• Make the first item span 2 columns
• Make the second item span 2 rows

👉 Hint:
Use grid-column and grid-row properties with span.

Task 2: Using span Keyword

Create a grid and try both methods:

grid-column: 1 / 3;

and

grid-column: span 2;

👉 Observe:

• How both give the same result
• Which one feels easier to use

Task 3: Website Layout Using Grid Areas

Create a full layout with:

• Header
• Sidebar
• Content
• Footer

Use:

grid-template-areas

👉 Make sure:

• Header and footer take full width
• Sidebar stays on left
• Content takes remaining space

Task 4: Responsive Grid with auto-fit

Create a card layout:

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

👉 Add at least 6–8 cards

Try resizing screen:

• Cards should automatically adjust
• No horizontal scroll should appear

Task 5: auto-fill vs auto-fit (Experiment Task)

Create two grids:

Grid 1:

repeat(auto-fit, minmax(200px, 1fr))

Grid 2:

repeat(auto-fill, minmax(200px, 1fr))

👉 Observe:

• How empty space behaves
• Which layout looks better

Task 6: Alignment Practice

Create a grid and apply:

justify-items: center;
align-items: center;

Then try:

justify-content: center;
align-content: center;

👉 Understand the difference between:

• Item alignment
• Grid alignment

Task 7: Dense Layout (Advanced)

Create a grid with different sized items.

Then apply:

grid-auto-flow: dense;

👉 Observe:

• How empty gaps are filled automatically

Task 8: Mini Project – Blog Layout

Create a simple blog layout:

• Header at top
• Sidebar on left
• Blog posts on right
• Footer at bottom

👉 Inside content section:

• Create multiple cards using Grid
• Make it responsive

Task 9: Image Gallery (Real World Use Case)

Create a responsive image gallery:

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

👉 Requirements:

• Equal spacing
• Responsive layout
• Images adjust automatically

Task 10: Combine Grid + Flexbox

Create a layout using Grid.

Inside one grid item:

• Use Flexbox to align content (like navbar or buttons)

👉 This is how real-world layouts are built.

In the next tutorial, we’ll learn about Flexbox vs Grid – When to Use What?