Grid Item Spanning (Important)

By default, each grid item takes 1 column and 1 row.

But we can make items span multiple columns or rows.

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 (Cleaner Way)

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 (Professional Level)

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 (Advanced Placement Control)

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 (Important Difference)

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

Property	Works On
justify-items	Items inside cells
justify-content	Whole grid

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

place-items (Shortcut Property)

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 (Deep Understanding)

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?