When should you choose CSS Grid or Flexbox?

Grid is useful for two-dimensional row-and-column layouts, while Flexbox is useful for one-dimensional distribution.

HTML & CSS#css#layout

THE ANSWER / PLAIN ENGLISH

The idea to remember.

Grid is useful for two-dimensional row-and-column layouts, while Flexbox is useful for one-dimensional distribution. They work well together: Grid for page structure and Flexbox for individual card content.

01Learn by doing

From first example to real project.

Start with the smallest working idea, examine a more detailed example, then look at a real application pattern. Adapt dependencies, error handling and data models to your project.

Basic: meaningful markup

01 / BEGINNER

Native HTML elements give browsers and assistive tech useful semantics.

HTML / EXAMPLE

<nav aria-label="Main navigation">
  <a href="/explore/questions">Interview questions</a>
</nav>
<main><h1>React interview guide</h1></main>

Intermediate: responsive CSS

02 / INTERMEDIATE

Use a fluid layout rather than fixed desktop widths.

CSS / EXAMPLE

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
.card { min-width: 0; }

Real scenario: accessible search form

03 / REAL SCENARIO

Connect the visible label and the input; communicate updated results.

HTML / EXAMPLE

<form role="search">
  <label for="search">Search questions</label>
  <input id="search" type="search" autocomplete="off" />
</form>
<p role="status" aria-live="polite">24 matching articles</p>

02Check your understanding

Try it in your own words.

Explain when should you choose CSS Grid or Flexbox without looking at the code. Then modify the intermediate example, describe one trade-off and identify when the real-world pattern fits.

Keep learning here.

Explore more in-depth guides, exercises and related interview questions in this library.

Browse HTML & CSS study guides ↗

← Back to question library