Grid + Flexbox - When to Use Which

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!

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Responsive Grid Layout</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Responsive Artifact Gallery</h1>
11    <div class="gallery">
12        <div class="item featured">Mask of Tutankhamun</div>
13        <div class="item">Rosetta Stone</div>
14        <div class="item">Ebers Papyrus</div>
15        <div class="item">Great Sphinx of Giza</div>
16        <div class="item">Cleopatra's Obelisk</div>
17        <div class="item">Scarab</div>
18        <div class="item">Canopic Jar</div>
19        <div class="item">Ankh Amulet</div>
20    </div>
21    <!-- Task: -->
22    <!-- 1. Use repeat(auto-fit, minmax(200px, 1fr)) -->
23    <!-- 2. .featured: grid-column: span 2 -->
24    <!-- 3. Add @media (max-width: 500px) so that .featured does not span -->
25</body>
26</html>