CSS Grid as a Two-Dimensional Layout System

Hi everyone!
If you’ve just finished learning about Flexbox, congrats! Flexbox is a great tool for arranging items in a single direction—either horizontally or vertically. But what if we want to build something more complex, like a layout with both columns and rows? That’s where CSS Grid becomes your new best friend.

In this article, we’ll explore the basics of Grid, compare it with Flexbox, and build a fun layout like a chessboard—all with just a few lines of code. Let’s jump in!

What is CSS Grid?

CSS Grid is a two-dimensional layout system that lets you organize content on a web page like pieces in a puzzle. Grid works in two directions—rows and columns—which makes it perfect for complex layouts like galleries, dashboards, or even news websites.

Image Illustration: A responsive weather forecast layout for Bern using grid-based sections.

With Grid, you can:

Create flexible column and row structures
Position items precisely on the page
Maintain consistent spacing between items
Build layouts that stay neat across different screen sizes (responsive design!)

CSS Grid vs Flexbox: What's the Difference?

You might wonder, "Isn't Flexbox also for layout? What's the difference?"

Let’s break it down:

System	Dimension	Best For
Flexbox	1D	Arranging elements in a single line
Grid	2D	Organizing layouts with rows + columns

Imagine you're placing a header, sidebar, main content, and footer. With Flexbox, you'd need nested divs and a bit of manual tweaking. With Grid, you can define it all directly in one container!

Image Illustration: Diagram showing the difference between 1D (Flexbox) and 2D (Grid) layout directions

Real-World Use: Combine Flexbox & Grid

Most developers don’t choose one over the other—they combine both!

Examples:

Use Grid to define the major layout areas (header, main, footer)
Use Flexbox inside those areas to align items in a row or column

"The more skills we carry, the more flexible we become." — Wise words from Grandpa :)

Try It Yourself: Grid vs Flexbox Example

To get a hands-on feel for the differences, check out this demo: dindindesign.com/p/css-grid-vs-flexbox.html

When you resize the browser:

Grid keeps rows and columns aligned perfectly
Flexbox allows flexibility but items might not line up consistently

Image Illustration: Screenshot comparing responsive layouts using Grid vs Flexbox

Let's Build Our First Grid!

Let’s start small with a simple example. Say we have the following HTML:

<div class="container">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>

CSS Setup:

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

Explanation:

display: grid → Activates grid layout
grid-template-columns: 1fr 2fr → First column takes 1 part, second takes 2
grid-template-rows: 1fr 1fr → Two equal-height rows
gap: 10px → Adds spacing between cells without needing margin

Image Illustration: A 2x2 grid layout where one column is twice as wide

Just like that, we’ve created a neat layout with minimal code!

Fun Challenge: Build a Chessboard!

Time to level up! Let’s build an 8x8 chessboard using CSS Grid. This challenge also introduces repeat() and paves the way for Grid Sizing.

HTML Structure:

Already pre-filled with 64 divs:

<div class="chessboard">
  <div class="white"></div>
  <div class="black"></div>
  <!-- 62 more -->
</div>

CSS Styling:

.chessboard {
  display: grid;
  grid-template-columns: repeat(8, 100px);
  grid-template-rows: repeat(8, 100px);
  width: 800px;
}

.white {
  background-color: #f0d9b5;
  width: 100px;
  height: 100px;
}

.black {
  background-color: #b58863;
  width: 100px;
  height: 100px;
}

Image Illustration: A modern chessboard layout with neutral square colors

What this does:

Creates 8 equal columns and rows
Defines each square as 100x100px
Colors them accordingly

If your board stretches across a large screen, you can center it with margin: auto or tweak display styles for polish.

Why Does CSS Grid Matter?

CSS Grid lets us:

Improve layout consistency
Reduce unnecessary wrapper divs
Build responsive layouts without heavy libraries
Combine with Flexbox for full layout control

For modern web design, mastering Grid is a superpower that makes your pages cleaner, more efficient, and visually awesome.

Trusted source: MDN Web Docs on CSS Grid

Ready for the Next Adventure?

We’ve just scratched the surface of CSS Grid’s power. In the next post, we’ll dive into Grid Sizing—how to control column and row sizes flexibly, proportionally, or automatically.

Grid Sizing - How to Size Columns and Rows

Keep experimenting, keep building. Because as the old saying goes, skills are the only luggage that never weighs you down.

See you in the next post, friends!