CSS Grid

Introduction

CSS Grid Layout is one of the most powerful layout systems in CSS. It allows you to create complex, responsive layouts with ease—something that was difficult using floats or Flexbox alone.

While Flexbox is best for one-dimensional layouts (row OR column), CSS Grid is designed for two-dimensional layouts (rows AND columns).

What is CSS Grid?

CSS Grid is a two-dimensional layout system.

That means:

• Flexbox → works in one direction (row OR column)
• Grid → works in both directions (rows AND columns)

👉 Grid is best for:

• Full page layouts
• Section layouts
• Complex designs

How to Create a Grid Container

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  gap: 10px;
}

.item {
  background: lightblue;
  padding: 20px;
  text-align: center;
}

Explanation:

• display: grid; → Enables grid layout
• grid-template-columns → Defines column sizes
• gap → Space between items

This creates a simple 3-column layout.

Understanding Grid Lines (Important Concept)

In CSS Grid, layouts are controlled using grid lines, not just boxes.

For example:

• If you create 3 columns, you will have 4 vertical grid lines
• Items are placed between these lines

👉 This is why we use values like:

grid-column: 1 / 3;

It means:

• Start at line 1
• End at line 3

So the item spans 2 columns.

Understanding grid lines will make Grid much easier to use.

Defining Columns and Rows

Columns

grid-template-columns: 1fr 1fr 1fr;

• fr = Fraction unit (equal space)
• Creates 3 equal columns

Rows

grid-template-rows: 100px 200px;

• Defines row heights

Repeat Function

Instead of writing values again and again:

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

This creates 3 equal columns. This is shorter and easier to maintain.

Grid Gap

gap: 20px;

You can also define separately:

row-gap: 10px;
column-gap: 20px;

Placing Items in Grid

You can control where items appear:

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

Explanation:

• Item spans from column 1 to column 3

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

• it spans 2 rows

Grid Areas (Named Layouts)

This is one of the most powerful features.

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

Assign areas:

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

This makes layout clean and readable.

Auto Placement

Grid automatically places items if no position is defined.

grid-auto-rows: 100px;

Automatically creates rows of 100px height

Aligning Items

Horizontal Alignment

justify-items: center;

Vertical Alignment

align-items: center;

Align Individual Item

.item {
  justify-self: end;
  align-self: start;
}

Responsive Grid (Important)

Make grid responsive using auto-fit and minmax():

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

Why this is powerful:

• Automatically adjusts layout
• Works on mobile, tablet, and desktop
• No need for many media queries

This is one of the most used Grid techniques in real projects.

Practical Example: Website Layout

<div class="container">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Content</main>
  <footer>Footer</footer>
</div>

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 200px 1fr;
  gap: 10px;
}header { grid-area: header; background: lightcoral; }
aside { grid-area: sidebar; background: lightgreen; }
main { grid-area: content; background: lightblue; }
footer { grid-area: footer; background: lightgray; }

Real-World Use Cases

CSS Grid is widely used in modern web design:

• Full website layouts (header, sidebar, footer)
• Admin dashboards
• Blog layouts
• Image galleries
• Landing pages

👉 Most professional websites combine Grid + Flexbox

When to Use Grid vs Flexbox

👉 Use Grid for page layout
👉 Use Flexbox for components

👉 Example:

• Layout = Grid
• Navbar inside layout = Flexbox

Browser Support & Importance

• Fully supported in all modern browsers
• Cleaner than floats and older techniques
• Reduces need for complex CSS hacks

👉 CSS Grid is considered a must-know skill for modern frontend development.

Pro Tip for Beginners

When learning Grid:

• First focus on grid structure (rows & columns)
• Then learn item placement
• Finally practice responsive layouts

👉 Don’t try to memorize everything—practice is key.

Common Mistakes

• ❌ Using Grid for simple alignment (use Flexbox instead)
• ❌ Not using fr units
• ❌ Overcomplicating layouts

Practice Tasks

Task 1: Basic Grid

Create a grid with:

• 3 columns
• Equal width
• 10px gap

Task 2: Card Layout

Create a responsive card layout using:

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

Task 3: Website Layout

Create a layout with:

• Header
• Sidebar
• Content
• Footer

Use grid-template-areas.

Task 4: Span Items

Make one grid item:

• Span 2 columns
• Span 2 rows

Conclusion

CSS Grid makes layout design clean, powerful, and responsive. Once you understand the basics, you can build almost any layout without hacks.

👉 Combine Grid + Flexbox for best results
👉 Practice real layouts to master it

In the next tutorial, we’ll learn about CSS Grid Advanced