CSS Layout

CSS Layout for Beginners: Grid vs Flexbox

Learn the difference between CSS Grid and Flexbox — two essential tools for arranging content on web pages.

Scroll to start

01 — The Concept

Two Tools for Laying Out Pages

When you build a webpage, you need to decide where everything goes. Where does the menu sit? How do the photos line up? Where does the footer go? CSS gives you two powerful tools to answer those questions: Flexbox and CSS Grid.

Think of it like arranging furniture in a room. Flexbox is like a single flexible row — great for lining things up in a line, like books on a shelf. CSS Grid is like a whole floor plan — it lets you place items in rows and columns, like a chess board.

Both tools do the same big job — putting things where you want them — but they work in different ways. Learning when to use each one is one of the most useful skills in web building.

02 — Why It Matters

Old Ways Were Painful

Before Flexbox and Grid, developers used tricks to move things around. They would use float: left to push elements side by side, or use tables to create layouts. These tricks worked, but they were confusing, hard to fix, and broke easily on different screen sizes.

Flexbox and Grid changed everything. They were built specifically to arrange page elements — and they actually work the way your brain expects them to work.

💡 Key Insight

Flexbox is best for one-dimensional layouts — a single row or column. Grid is best for two-dimensional layouts — rows AND columns at the same time. When in doubt, start with Flexbox. Graduate to Grid when you need full two-dimensional control.

03 — How It Works

The Flexbox vs Grid Cheat Sheet

Here's how to think about each tool:

Flexbox — One Dimension

📐 Items sit in a single row OR a single column
↔️ Great for: menus, button groups, centering things
📱 Items shrink and grow to fit the space
🧩 You control the direction with flex-direction

CSS Grid — Two Dimensions

📊 Items sit in rows AND columns at the same time
🏗️ Great for: page layouts, photo galleries, dashboards
🎯 You define the track sizes (rows and columns)
🗺️ Items snap into specific grid cells

To use Flexbox, you add display: flex to the container. To use Grid, you add display: grid. That's the starting point for both tools!

04 — Practical Example

Flexbox: A Navigation Menu

Here's a simple Flexbox example — a navigation bar with a logo on the left and links on the right:

Flexbox Nav — index.html

<!-- The container that holds everything -->
<nav style="display: flex; justify-content: space-between; padding: 1rem;">

  <!-- Logo on the left -->
  <div class="logo">My Site</div>

  <!-- Links on the right -->
  <div style="display: flex; gap: 1rem;">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </div>

</nav>

Grid: A Photo Gallery

Here's a Grid example — a photo gallery where images automatically line up in three columns:

Grid Gallery — index.html

<!-- A container with 3 equal columns -->
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem;">

  <img src="photo1.jpg" alt="Photo 1">
  <img src="photo2.jpg" alt="Photo 2">
  <img src="photo3.jpg" alt="Photo 3">
  <img src="photo4.jpg" alt="Photo 4">
  <img src="photo5.jpg" alt="Photo 5">
  <img src="photo6.jpg" alt="Photo 6">

</div>

The gap: 1rem property adds space between each item automatically — no extra margins needed!

05 — Test Yourself

Knowledge Check

Test what you learned with this quick quiz.

Quick Quiz — 3 Questions

Question 1

You want to put three buttons in a single horizontal row. Which tool should you use?

Question 2

You want to create a full page layout with a header, sidebar, main content area, and footer — all arranged in a grid. Which tool is best for this?

Question 3

What CSS property do you add to a container to start using Flexbox?