CSS Grid vs Flexbox: When to Use Which?

The Great Debate: One Dimension vs Two#

For years, developers hacked layouts with float, clear, and position: absolute. Then came Flexbox, which saved us. Then came CSS Grid, which confused us.

The most common question juniors ask is: "Should I use Grid or Flexbox?" The senior answer is: Use Both.

They are not competitors; they are teammates designed to solve different problems.

The Core Difference

• Flexbox is Content-First and One-Dimensional. You use it when you want items to arrange themselves in a line (row or column) based on how big they are.
• CSS Grid is Layout-First and Two-Dimensional. You use it when you want to define a strict structure (rows AND columns) and force content to fit into those boxes.

Deep Dive: Flexbox (Flex)#

Think of Flexbox as a necklace string. You thread beads (items) onto it. You can slide them to the left, right, or space them out, but they essentially live on a single line.

Best Use Cases for Flexbox

1. Navigation Bars: A logo on the left, links on the right. Perfect for justify-content: space-between.
2. Buttons: Aligning an icon and text perfectly center inside a button.
3. Form Elements: An input field next to a "Submit" button.
4. Card Internals: Aligning the title, description, and "Read More" link inside a card.

Flexbox Code Pattern

/* The Container */
.navbar {
  display: flex; /* Activate Flexbox */
  justify-content: space-between; /* Horizontal alignment */
  align-items: center; /* Vertical alignment */
}

Deep Dive: CSS Grid#

Think of CSS Grid as a chessboard. You define the board first (8x8 squares), and then you place pieces (content) onto specific coordinate squares.

Best Use Cases for Grid

1. Page Layouts: Defining the Header, Sidebar, Main Content, and Footer structure.
2. Image Galleries: Creating a responsive mesh of images that keeps structure regardless of image size.
3. Dashboards: Complex widgets where you need item A to span 2 columns and item B to span 2 rows.
4. Overlapping Content: Grid is the only layout system that lets you easily stack items on top of each other without position: absolute.

Grid Code Pattern

/* The Container */
.dashboard-layout {
  display: grid;
  /* Create 3 columns: 250px sidebar, auto spacing, remaining space */
  grid-template-columns: 250px 20px 1fr; 
  /* Create rows */
  grid-template-rows: auto 1fr auto;
  gap: 20px; /* Space between cells */
}

The "Holy Grail" Layout Example#

Let's look at how to build a classic layout using both technologies where they shine best.

1. The Macro Layout (Use Grid)

We want a Header, a Sidebar, and a Main Content area.

.app-container {
  display: grid;
  height: 100vh;
  grid-template-areas:
    "header header"
    "sidebar main";
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr;
}

2. The Micro Components (Use Flexbox)

Inside that Header, we have navigation links. We don't need a grid for that; we just need them in a row.

.header-nav {
  grid-area: header;
  display: flex; /* Switch to Flexbox */
  gap: 1rem;
  align-items: center;
}

Advanced Grid Tricks: minmax()#

One of the most powerful features of Grid is minmax. It allows you to create responsive columns without media queries.

.gallery {
  display: grid;
  /* Create as many columns as fit, but never smaller than 200px */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

This single line of CSS replaces dozens of lines of sizing logic.

Summary#

Rule of Thumb: Start with Grid for the main page structure. Switch to Flexbox as soon as you enter a specific component (like a Card or Navbar).