Web Design:

CSS: When to use Flexbox, when to use Grid

Summary

This article explains why CSS Flexbox is best for one-dimensional layouts, while CSS Grid excels at two-dimensional layouts. Use Flexbox for navigation bars and centering, and Grid for structured page layouts. Learn when to combine Flexbox and Grid.

Published:

2025-02-22

Updated:

2025-02-22

Reading time:

03:23

Author:

Jonas Jared Jacek

Tags:

web development, css

License:

CC BY-NC-SA 4.0

Permalink:

When to use Flexbox, when to use Grid

Introduction #

CSS (Cascading Style Sheets) provides two powerful layout systems: Flexbox and Grid. You can use each where they excel and combine them. Understanding when to use each or both will help you create responsive, modern, and maintainable web designs. Let’s go.

Technical differences between Flexbox and Grid #

Flexbox is a one-dimensional layout model that aligns items either in a row or a column. It is ideal for distributing space along a single axis and is best for layouts where you need to control the alignment and spacing of elements dynamically.

Grid, on the other hand, is a two-dimensional layout model that allows you to define rows and columns simultaneously. It is more suitable for complex layouts where you need precise control over both horizontal and vertical positioning.

When to use Flexbox #

Flexbox is best suited for components that need alignment along a single axis. It is particularly useful for items that should dynamically resize or be evenly distributed.

Example 1: Centering a div #

.container {
  display: flex; /* Enables Flexbox for the container */
  justify-content: center; /* Centers items horizontally */
  align-items: center; /* Centers items vertically */
  height: 100vh; /* Sets the height to the full viewport height */
}

<div class="container">
  <div class="box">Centered Box</div>
</div>

This example centers a box both horizontally and vertically within the container.

Example 2: Navigation bar #

.nav {
  display: flex; /* Enables Flexbox */
  justify-content: space-between; /* Places items at each end with space in between */
  padding: 10px; /* Adds spacing around the navigation bar */
}

<div class="nav">
  <div>Logo</div>
  <div>Menu</div>
</div>

This layout ensures that the logo and menu stay on opposite ends of the navigation bar.

Example 3: Sidebar with content #

.layout {
  display: flex; /* Enables Flexbox */
}
.sidebar {
  flex: 1; /* Gives the sidebar a flexible width */
}
.content {
  flex: 3; /* Makes the content area three times wider than the sidebar */
}

<div class="layout">
  <div class="sidebar">Sidebar</div>
  <div class="content">Main Content</div>
</div>

This layout keeps a flexible sidebar while ensuring the main content takes up more space.

When to use Grid #

Grid is best when you need to structure a page layout with multiple rows and columns.

Example 1: Basic grid layout #

.container {
  display: grid; /* Enables Grid layout */
  grid-template-columns: repeat(3, 1fr); /* Creates three equal-width columns */
  gap: 10px; /* Adds spacing between grid items */
}

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

This example creates a responsive three-column layout.

Example 2: Card layout #

.cards {
  display: grid; /* Enables Grid layout */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Creates flexible columns with a minimum width of 200px */
  gap: 20px; /* Adds spacing between cards */
}

<div class="cards">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

This layout ensures that cards adjust based on the available space.

Example 3: Full-page layout #

.page {
  display: grid; /* Enables Grid layout */
  grid-template-rows: auto 1fr auto; /* Defines header, content, and footer sections */
}

<div class="page">
  <header>Header</header>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

This layout creates a structured page with a header, main content, and footer.

How to combine Flexbox and Grid #

Sometimes, the best solution is a combination of both Flexbox and Grid.

Example 1: Grid layout with flexible navigation #

.container {
  display: grid; /* Enables Grid layout */
  grid-template-rows: auto 1fr; /* Creates a flexible layout with a fixed navigation bar */
}
.nav {
  display: flex; /* Enables Flexbox for navigation */
  justify-content: space-between; /* Ensures elements are spread out */
}

<div class="container">
  <div class="nav">
    <div>Logo</div>
    <div>Menu</div>
  </div>
  <div>Main Content</div>
</div>

This approach ensures the navigation bar stays flexible while maintaining a structured layout.

Example 2: Grid with flexible buttons #

.container {
  display: grid; /* Enables Grid layout */
  grid-template-columns: 1fr 2fr; /* Creates two columns, with the second being twice as wide */
}
.buttons {
  display: flex; /* Enables Flexbox */
  justify-content: center; /* Centers buttons horizontally */
}

<div class="container">
  <div>Sidebar</div>
  <div class="buttons">
    <button>Save</button>
    <button>Cancel</button>
  </div>
</div>

This layout ensures the sidebar remains structured while buttons align dynamically.

Example 3: Responsive grid with flexbox elements #

.grid {
  display: grid; /* Enables Grid layout */
  grid-template-columns: repeat(2, 1fr); /* Creates two equal columns */
}
.flex-container {
  display: flex; /* Enables Flexbox */
  justify-content: space-around; /* Distributes items evenly */
}

<div class="grid">
  <div class="flex-container">
    <div>Item A</div>
    <div>Item B</div>
  </div>
  <div class="flex-container">
    <div>Item C</div>
    <div>Item D</div>
  </div>
</div>

This example combines a structured grid layout with flexible item distribution within each section.

Further readings #

Sources and recommended, further resources on the topic:

• W3C: CSS Flexible Box Layout Module Level 1
• W3C: CSS Grid Layout Module Level 3
• MDN: Basic concepts of flexbox
• MDN: CSS grid layout

Author

Jonas Jared Jacek (J15k)

Jonas works as project manager, web designer, and web developer since 2001. On top of that, he is a Linux system administrator with a broad interest in things related to programming, architecture, and design. See: https://www.j15k.com/

<p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="https://www.ditig.com/css-flexbox-vs-grid">CSS: When to use Flexbox, when to use Grid</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://www.j15k.com/">Jonas Jared Jacek</a> is licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-NC-SA 4.0</a>.</p>