Grid + Flexbox — When to Use Which

@name, in an Egyptian architect's toolkit there were different tools — a chisel for precise carving and a lever for moving large blocks. Similarly, in CSS you have two powerful layout systems: CSS Grid and Flexbox. Each has its strengths and ideal use cases. Let's learn when to reach for which tool!

CSS Grid — Two-Dimensional Layout

CSS Grid is a two-dimensional system — you control both columns AND rows simultaneously. Use it when you need full control over the layout in both axes:

1/* Grid: ideal for entire page layouts */
2.page-layout {
3  display: grid;
4  grid-template-areas:
5    "header  header  header"
6    "nav     main    aside"
7    "footer  footer  footer";
8  grid-template-columns: 200px 1fr 250px;
9  grid-template-rows: auto 1fr auto;
10  min-height: 100vh;
11}

When to choose Grid:

• Full page layouts — header, sidebar, main, footer
• Galleries and dashboards — card grids of various sizes
• Elements with fixed positions — precise placement within the grid
• When you need control in both axes simultaneously
• Overlapping elements — grid allows overlap

Flexbox — One-Dimensional Layout

Flexbox is a one-dimensional system — you control the layout in one direction at a time (row OR column). Use it for arranging elements in a line:

1/* Flexbox: ideal for navigation */
2.navbar {
3  display: flex;
4  justify-content: space-between;
5  align-items: center;
6  padding: 1rem 2rem;
7}
8
9/* Flexbox: ideal for centering */
10.hero-section {
11  display: flex;
12  flex-direction: column;
13  justify-content: center;
14  align-items: center;
15  min-height: 400px;
16}

When to choose Flexbox:

• Navigation bars and toolbars — elements in a single line
• Centering elements — quick and simple with flex
• Dynamic content — elements adapt to the content
• Small components — buttons, cards, forms
• When you don't know the number of elements in advance

Practical Comparison

Let's see the same problem solved both ways:

Example 1: Three cards side by side

1/* Flexbox - cards adapt to content */
2.cards-flex {
3  display: flex;
4  gap: 20px;
5  flex-wrap: wrap;
6}
7
8.card-flex {
9  flex: 1 1 300px;  /* Grows, shrinks, min 300px */
10}
11
12/* Grid - cards have equal sizes */
13.cards-grid {
14  display: grid;
15  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
16  gap: 20px;
17}

The difference? With Flexbox, cards may have different sizes if the content varies. With Grid, each card is exactly the same size. If you want an even grid — choose Grid. If you want flexibility — Flexbox.

Example 2: Navigation

1/* Flexbox - the natural choice for nav */
2.nav {
3  display: flex;
4  gap: 1rem;
5  align-items: center;
6}
7
8.nav-logo { margin-right: auto; }  /* Logo on the left, rest on the right */

For navigation, Flexbox is clearly the better choice — elements are in a single line and you can easily control their distribution.

Combining Grid + Flexbox

You'll get the best results by combining both systems! Grid for the main layout, Flexbox for inner components:

1/* Grid: main page structure */
2.page {
3  display: grid;
4  grid-template-areas:
5    "header"
6    "main"
7    "footer";
8  grid-template-rows: auto 1fr auto;
9  min-height: 100vh;
10}
11
12/* Flexbox: navigation in the header */
13.header {
14  grid-area: header;
15  display: flex;
16  justify-content: space-between;
17  align-items: center;
18  padding: 1rem 2rem;
19}
20
21/* Grid: card grid in main */
22.main {
23  grid-area: main;
24  display: grid;
25  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
26  gap: 1.5rem;
27  padding: 2rem;
28}
29
30/* Flexbox: content of a single card */
31.card {
32  display: flex;
33  flex-direction: column;
34}
35
36.card-body {
37  flex: 1;  /* Fills available space */
38}
39
40.card-footer {
41  display: flex;
42  justify-content: space-between;
43  align-items: center;
44}
45
46/* Flexbox: footer */
47.footer {
48  grid-area: footer;
49  display: flex;
50  justify-content: center;
51  gap: 2rem;
52  padding: 1rem;
53}

Quick Decision Path

Think about your task:

1. Laying out an entire page? -> Grid (grid-template-areas)
2. Creating a card grid/gallery? -> Grid (repeat + auto-fit)
3. Arranging elements in a single line? -> Flexbox
4. Centering an element? -> Flexbox (or Grid with place-items)
5. Need control in 2 axes? -> Grid
6. Elements have different sizes and dynamic content? -> Flexbox
7. Elements should have equal sizes in a grid? -> Grid

It's like choosing tools in a pyramid architect's workshop — a chisel for details (Flexbox), a lever for large blocks (Grid). Together, they create monumental structures!