CSS Grid vs Flexbox Choosing the Right Layout System

With both CSS Grid and Flexbox supported across modern browsers, a common question in frontend architecture is when to use each. The rule of thumb is simple: Flexbox excels at one-dimensional content distribution (a single row or column), while CSS Grid is purpose-built for two-dimensional layouts where rows and columns must align simultaneously.

Instead of choosing one exclusively, the cleanest CSS combines both—using CSS Grid for the macro page or card grid and Flexbox for aligning items inside individual components.

Example #

Use Flexbox when:
- Aligning navigation links and a logo inside a header bar
- Centering an icon next to button text
- Wrapping a row of variable-width tag pills

Use CSS Grid when:
- Building a responsive multi-column card grid without media queries
- Defining a page skeleton (header, sidebar, main content, footer)
- Ensuring card heights and columns line up strictly across rows

Input : Unstyled card list and navigation bar
Output : Responsive 2D card grid with 1D Flexbox component alignment.

Implementation #

/* 1. Two-Dimensional Card Layout with CSS Grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 24px;
  padding: 0;
  list-style: none;
}

/* 2. One-Dimensional Component Layout with Flexbox */
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #dedede;
  padding: 24px;
  background: #ffffff;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}

<ul class="card-grid">
  <li class="card">
    <div class="card-body">
      <h3>Semantic Markup</h3>
      <p>Keep your DOM lean and meaningful.</p>
    </div>
    <div class="card-footer">
      <time datetime="2019-02-19">19 Feb 2019</time>
      <a href="/posts/">Read More</a>
    </div>
  </li>
</ul>

Main Point: Use repeat(auto-fit, minmax(280px, 1fr)) in CSS Grid for intrinsically responsive multi-column grids, and pair it with Flexbox inside each card to pin footers and align actions.

Credits #

Photo by Maik Jonietz

← Home