InnoMarts logo
InnoMarts
Fast websites
← Back to course

CSS Grid Layout

CSS Grid Layout

Welcome back.

In the previous lesson, you learned Flexbox.

Flexbox is great for arranging elements in one direction.

Rows.

Columns.

Centered things.

Life became slightly less chaotic.

Now we meet CSS Grid.

Grid is for two-dimensional layouts.

That means rows and columns together.

Flexbox is like arranging chairs in one line.

Grid is like planning the whole room.

Walls.

Tables.

Windows.

That one chair nobody knows where to put.

Grid gives you serious layout control.

And yes, at first it looks a little intimidating.

But do not panic.

Grid is not a monster.

It is just a very organized spreadsheet with better fashion sense.

What You’ll Learn

In this lesson, you’ll learn:

What Is CSS Grid?

CSS Grid is a layout system for arranging elements in rows and columns.

It helps you create layouts like:

Flexbox is best for one direction.

Grid is best for two directions.

Example:

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

This creates three equal columns.

Each 1fr means one fraction of the available space.

CSS does the math.

For once, you do not have to calculate everything manually like a tired accountant with a keyboard.

Grid vs Flexbox

Use Flexbox when you need one direction:

Use Grid when you need rows and columns:

Flexbox says:

“Let me arrange these items in a line.”

Grid says:

“Give me the whole floor plan.”

Both are useful.

Neither is magic.

But Grid sometimes feels like magic when your layout finally stops fighting you.

Create the Project

Create a folder for this lesson:

mkdir css-lesson6
cd css-lesson6
touch index.html
touch style.css

You should have:

css-lesson6/
  index.html
  style.css

Open the folder in your editor.

We will build a course cards page.

It will have:

Simple idea.

Very useful pattern.

You will use this kind of layout everywhere.

Courses.

Blog posts.

Services.

Portfolio projects.

Even pizza menus, if the pizza is serious about frontend architecture.

Write the HTML

Open index.html and add this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid Layout</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <h1>CSS Grid Layout</h1>
    <p>Build clean rows and columns without losing your soul.</p>
  </header>

  <main class="page">
    <section class="intro">
      <h2>Course Topics</h2>
      <p>
        CSS Grid helps us create powerful two-dimensional layouts using rows and columns.
      </p>
    </section>

    <section class="course-grid">
      <article class="course-card">
        <h2>HTML Basics</h2>
        <p>Learn the structure of web pages.</p>
      </article>

      <article class="course-card">
        <h2>CSS Styling</h2>
        <p>Make pages readable, clean, and beautiful.</p>
      </article>

      <article class="course-card">
        <h2>Flexbox</h2>
        <p>Align elements in rows or columns.</p>
      </article>

      <article class="course-card">
        <h2>CSS Grid</h2>
        <p>Build layouts with rows and columns together.</p>
      </article>

      <article class="course-card">
        <h2>Responsive Design</h2>
        <p>Make websites work on different screen sizes.</p>
      </article>

      <article class="course-card">
        <h2>Animations</h2>
        <p>Add smooth movement and interactive effects.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Created while learning CSS Grid.</p>
  </footer>
</body>
</html>

This gives us six cards.

Without CSS, they will appear stacked vertically.

That is fine.

HTML is doing its job.

Now CSS Grid enters with a clipboard and says:

“Let’s organize this.”

Start with Basic Styles

Open style.css and add:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 56px 24px;
}

.site-header h1 {
  margin: 0 0 12px;
  font-size: 48px;
}

.site-header p {
  margin: 0;
  color: #d1d5db;
  font-size: 20px;
}

This creates a simple header.

Now add the page container:

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

This centers the main content and limits its width.

A layout without max width can become too wide.

And very wide text is painful to read.

Like watching a sentence run a marathon across your monitor.

Create a Grid Container

To create a grid, use:

display: grid;

Add this:

.course-grid {
  display: grid;
}

Now .course-grid becomes a grid container.

The direct children become grid items.

In our case, every .course-card becomes a grid item.

But nothing dramatic happens yet.

We created the grid container.

Now we need to define columns.

CSS is waiting for instructions.

Like a very strict assistant with no imagination.

Define Grid Columns

Use grid-template-columns to define columns.

Add this:

.course-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

This creates three columns.

Each column gets one equal part of the available space.

fr means fraction.

So this:

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

means:

Divide the available space into three equal parts.

You now have a three-column grid.

CSS did not complain.

A rare and beautiful moment.

The fr Unit

The fr unit means a fraction of available space.

Example:

grid-template-columns: 1fr 2fr;

This creates two columns.

The second column is twice as wide as the first.

Example:

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

This creates three equal columns.

The fr unit is very useful because it adapts to available space.

You do not need to write:

width: 33.333333%;

That number looks like a spreadsheet had a headache.

Use fr.

Cleaner.

Friendlier.

Less suspicious.

Add Gap Between Grid Items

Right now, the cards may be too close.

Add gap:

.course-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

gap creates space between rows and columns.

This is cleaner than manually adding margins to every card.

Good spacing makes layouts readable.

Bad spacing makes a page feel like everyone is standing too close in an elevator.

Nobody wants that.

Especially not your cards.

Style the Cards

Add this:

.course-card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 18px;
}

.course-card h2 {
  margin-top: 0;
  font-size: 24px;
}

.course-card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

Now the cards look like real cards.

White background.

Padding.

Border.

Rounded corners.

A nice calm layout.

No screaming.

No chaos.

Only organized boxes, which is exactly what CSS secretly wanted all along.

Style the Intro Section

Add this:

.intro {
  background-color: white;
  padding: 32px;
  border-radius: 18px;
  margin-bottom: 24px;
  border-left: 6px solid #2563eb;
}

.intro h2 {
  margin-top: 0;
  font-size: 32px;
}

.intro p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

The intro section now has:

This is a common pattern.

A highlighted intro box.

Simple.

Clear.

Not trying to become a circus.

Good.

Use repeat

Writing this is okay:

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

But CSS gives us a cleaner version:

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

This means:

Create 3 columns, each 1fr wide.

Update .course-grid:

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

This is easier to read.

Especially when you have more columns.

For example:

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

Four equal columns.

Simple.

Elegant.

CSS briefly wearing a suit.

Fixed and Flexible Columns

You can combine fixed and flexible columns.

Example:

grid-template-columns: 250px 1fr;

This creates:

Example:

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

This creates:

This is useful for dashboards or layouts with sidebars.

But for simple cards, repeat(3, 1fr) is perfect.

Do not overcomplicate things.

CSS already has enough places to hide trouble.

Grid Rows

Grid can also define rows.

Example:

grid-template-rows: auto auto;

But many times, rows are created automatically.

In our card grid, we define columns.

The browser creates rows as needed.

Six cards.

Three columns.

Result:

Very convenient.

The browser does the boring part.

We allow it.

Make Cards Equal Height

Grid items in the same row naturally stretch to equal height by default.

This means if one card has more text, the row can still look aligned.

This is one of the reasons Grid is great for cards.

You can also make card content more organized later with Flexbox inside each card.

Yes, Flexbox and Grid can work together.

They are not enemies.

They are coworkers.

Sometimes awkward coworkers.

But still coworkers.

Responsive Grid Problem

Our grid has three columns:

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

This looks good on desktop.

But on a small phone screen, three columns may become too narrow.

The cards will suffer.

The text will suffer.

Your users will suffer.

And then everybody blames CSS.

So we need responsive design.

We will study responsive design properly in the next lesson, but we can already make a simple improvement.

Simple Responsive Grid

Add this at the bottom of your CSS:

@media (max-width: 800px) {
  .course-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .course-grid {
    grid-template-columns: 1fr;
  }
}

This means:

Now the layout adapts.

The cards can breathe.

The phone does not cry.

Good responsive behavior.

Very important.

Complete CSS

Your style.css should look like this:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 56px 24px;
}

.site-header h1 {
  margin: 0 0 12px;
  font-size: 48px;
}

.site-header p {
  margin: 0;
  color: #d1d5db;
  font-size: 20px;
}

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.intro {
  background-color: white;
  padding: 32px;
  border-radius: 18px;
  margin-bottom: 24px;
  border-left: 6px solid #2563eb;
}

.intro h2 {
  margin-top: 0;
  font-size: 32px;
}

.intro p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

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

.course-card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 18px;
}

.course-card h2 {
  margin-top: 0;
  font-size: 24px;
}

.course-card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

@media (max-width: 800px) {
  .course-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .course-grid {
    grid-template-columns: 1fr;
  }
}

Save.

Refresh.

Resize the browser.

Watch the grid change.

Three columns.

Two columns.

One column.

That is CSS Grid doing serious work.

Quietly.

Like a professional who does not need applause but absolutely deserves coffee.

Common Mistakes

Forgetting display grid

Wrong:

.course-grid {
  grid-template-columns: repeat(3, 1fr);
}

Correct:

.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Without display: grid, grid properties do nothing.

CSS will simply ignore your beautiful plans.

Cold.

But predictable.

Making too many columns

This may look fine on a huge screen:

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

But on smaller screens, it becomes unreadable.

Do not force too many columns.

Your layout should serve the content.

Not squeeze it like luggage before a cheap flight.

Forgetting gap

A grid without gap can look crowded.

Better:

.course-grid {
  display: grid;
  gap: 24px;
}

Spacing matters.

Your content needs room.

So does your brain.

Practice

Create a page with:

Use CSS Grid to create:

Use:

Change the number of cards.

Try 4.

Try 8.

Try 10.

Watch how the grid creates rows automatically.

The browser is doing layout work for you.

Let it.

That is why we have tools.

Mini Challenge

Create a project gallery.

Each card should have:

Use Grid to show the projects in three columns.

Make one card special with a class:

<article class="project-card featured">

Then style it differently:

.featured {
  border-color: #2563eb;
}

Try making the grid responsive.

This is a real portfolio pattern.

You can use it for your own projects.

And yes, now your projects can stand in rows like disciplined little soldiers.

Frontend soldiers.

With border radius.

Summary

Today you learned:

Grid is powerful.

Flexbox is still useful.

They work together.

Use Flexbox for one direction.

Use Grid for rows and columns.

Use both when needed.

That is not cheating.

That is frontend wisdom.

Next Lesson

In the next lesson, we will learn responsive design.

Because a page that looks good only on your laptop is not finished.

It is just confident in one room.