How I Finally Understood CSS Grid (with Real Examples)

I used to avoid CSS Grid because it looked complicated.
So many new properties, so many numbers, I just stuck to Flexbox.
But once I understood how it actually works, layouts became super easy.

Here’s the simple way I finally got it.

What Is CSS Grid?

CSS Grid is a layout system that lets you create rows and columns easily perfect for full web page layouts or dashboards.

To start, you just define:

.container {
  display: grid;
}

That one line activates Grid on your container.

Defining Columns and Rows

You decide how many columns and rows you want using grid-template-columns and grid-template-rows:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 20px;
}

🧠 Explanation:

• 1fr = one fraction of available space (3 equal columns)

• gap = space between grid items

This gives you a simple 3-column layout.

Placing Items in the Grid

Each child can be placed exactly where you want it:

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

That means:

• The item spans from column 1 to 3 (2 columns wide)

• And stays in the first row

Perfect for banners or hero sections.

Responsive Grid in One Line

You can make your layout responsive automatically with:

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

Each column will resize and wrap based on the screen size — no media queries needed.

Learn More

If you found this helpful, I post more beginner-friendly web development tutorials every week on LearnWithJoosy.com where I break down complex topics into simple steps you can actually understand. Join us now