✓ CAC REGISTEREDRC - 9900489View certificate
Blessed Records Exclusive Ent.
Promote your music

Technology & Software · Written by the Blessed Records editorial team · Published 21 October 2026

For years, arranging elements on a web page felt like fighting the browser. Flexbox and Grid changed that. They are two layout systems built into CSS that let you line things up, space them evenly and make them adapt to different screens. This tutorial explains what each does best and gives you short examples you can try today.

Flexbox: one direction at a time

Flexbox arranges items along a single line, either a row or a column. It is ideal for navigation bars, button groups, toolbars and any set of items that should be aligned and spaced evenly. You turn it on by setting display: flex on the parent element.

.nav {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}

Here gap adds space between items, justify-content spreads them along the row and align-items centres them vertically.

Grid: rows and columns together

CSS Grid arranges items in two dimensions at once, which suits page layouts, galleries and card collections. The example below creates as many columns as will fit, each at least 240 pixels wide, and stretches them to fill the available space.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

Because auto-fit and minmax adjust the number of columns automatically, the same code produces one column on a phone and several on a wide screen, with no extra media queries.

Which one should you use?

  • Flexbox for components in a line: menus, rows of buttons, centring one item inside another.
  • Grid for whole-page structure and collections of cards.
  • They work well together. A grid of cards can contain cards that use Flexbox inside.

Useful properties to learn

  • flex-wrap: wrap lets items move to a new line when space runs out.
  • flex: 1 makes an item grow to share available space.
  • grid-template-columns defines the columns.
  • gap works in both systems and replaces many old margin tricks.

Common mistakes

  1. Forgetting to set display on the parent, so the properties do nothing.
  2. Fixing widths in pixels, which breaks layouts on small screens.
  3. Using Grid when a simple Flexbox row would do, or the reverse.
  4. Not testing on a real phone.

Practice exercise

Build a row of three cards. First arrange them with Flexbox, then rebuild the same layout with Grid. Resize your browser window and notice how each behaves. A short exercise like this teaches more than reading about it.

Common questions

Do I still need floats or old layout tricks?
Almost never. Flexbox and Grid are supported by all modern browsers and replace most older techniques.

Can I use Grid and Flexbox on the same page?
Yes. Use Grid for the overall structure and Flexbox inside individual components such as headers and buttons.

Why does my layout break on a phone?
The usual causes are fixed pixel widths, a missing viewport tag or items that cannot shrink. Use flexible widths and test early.

A habit worth building

Whenever you see a layout you like on another website, open your browser’s developer tools, inspect the element and look at whether it uses Flexbox or Grid. Reading real examples and then rebuilding them from scratch is one of the quickest ways to understand how professional pages are put together.

Key takeaways

  • Flexbox handles one-dimensional alignment; Grid handles rows and columns.
  • Auto-fit with minmax creates responsive card grids with very little code.
  • Test layouts on small screens as you build them.

Keep reading

This article is for general information and education. It is not legal, financial or professional advice. Read our editorial standards.

    Share