CSS Flexbox and Grid: Modern Layouts Explained for Beginners

This article is part 3 of a four-part series on HTML and CSS fundamentals. If selectors and the box model are still new to you, start with Part 2: CSS Basics. After this, continue with Part 4: Responsive Web Design.

Once you want to style more than a single element — say, a navigation bar with several links side by side, or a grid of product cards — simple box model properties alone won’t cut it anymore. That’s what Flexbox and Grid were built for: two modern CSS layout systems that solve complex arrangements with just a few lines of code, where developers used to rely on ugly float and positioning hacks. This guide explains both systems, shows practical examples, and helps you decide when to use which.

Why Do We Even Need Flexbox or Grid?

Before Flexbox and Grid, developers had to build layouts using tricks like float or position: absolute — error-prone and hard to maintain. Flexbox (widely supported since around 2015) and Grid (since around 2017) are CSS modules purpose-built for layout problems. The short version:

• Flexbox is one-dimensional: it arranges elements in ONE direction — either as a row or as a column.
• Grid is two-dimensional: it arranges elements in rows AND columns at the same time, like a real grid.

Flexbox: Arranging Elements in a Row or Column

To activate Flexbox, set display: flex on a parent element. All direct child elements automatically become “flex items”:

<div class="flex-container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

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

The most important Flexbox properties to get started:

• display: flex — activates Flexbox on the container
• flex-direction — row (default, side by side) or column (stacked)
• justify-content — alignment along the main axis: flex-start, center, space-between, space-around
• align-items — alignment along the cross axis: flex-start, center, stretch
• gap — spacing between elements, without margin hacks
• flex-wrap: wrap — allows elements to wrap onto a new line instead of being squeezed

Typical use cases: a horizontal navigation bar, a centered login button, a card with an image on the left and text on the right.

CSS Grid: True Two-Dimensional Layouts

You activate Grid with display: grid on the container. The big difference from Flexbox: you explicitly define columns AND rows:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

repeat(3, 1fr) creates three equal-width columns (1fr means “one share of the available space”). This is one of the most common Grid use cases: a product grid, an image gallery, a dashboard layout.

The most important Grid properties to get started:

• display: grid — activates Grid on the container
• grid-template-columns — defines the number and width of columns
• grid-template-rows — defines the number and height of rows
• gap — spacing between cells (horizontal and vertical)
• grid-column / grid-row — controls how many cells a single element spans

One especially handy feature is auto-fit combined with minmax() for responsive grids without any media queries:

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

This single line ensures as many columns fit side by side as possible (each at least 250px wide), and automatically shows fewer columns on narrower screens — with no extra breakpoints needed.

Flexbox vs. Grid: When to Use Which

The most common beginner question — here’s the practical rule of thumb:

• Use Flexbox when you want to arrange elements in ONE direction: a navigation bar, a group of buttons, a card with an image and text side by side, centering a single element.
• Use Grid when you need a true two-dimensional layout: a page’s overall structure (header, sidebar, content, footer), a product grid, an image gallery with multiple rows and columns.

In practice, most modern websites combine both: Grid for the overall page layout, Flexbox for fine-tuning alignment within individual grid cells. They’re not mutually exclusive — they complement each other.

Practical Example: Page Layout with Grid, Navigation with Flexbox

<div class="page">
  <header class="head">
    <nav class="nav">
      <a href="#">Home</a>
      <a href="#">Blog</a>
      <a href="#">Contact</a>
    </nav>
  </header>
  <aside class="sidebar">Sidebar</aside>
  <main class="content">Main content</main>
  <footer class="foot">Footer</footer>
</div>

.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-areas:
    "head head"
    "sidebar content"
    "foot foot";
}

.head { grid-area: head; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.foot { grid-area: foot; }

.nav {
  display: flex;
  gap: 24px;
}

Grid handles the overall structure here using named areas (grid-template-areas — a very readable Grid feature), while Flexbox arranges the individual links side by side within the navigation.

What Comes Next?

With Flexbox and Grid, you can now build complete layouts. The one missing piece is: how do you make sure this layout looks good on every device — from a small smartphone to a big desktop monitor? That’s the topic of Part 4 of this series: Responsive Web Design: How Your Website Looks Great on Every Device.

Frequently Asked Questions About Flexbox and Grid

Can I use Flexbox and Grid together on one page?

Yes, and it’s actually recommended. A typical pattern is Grid for the overall page layout and Flexbox for smaller components within the grid cells, like a navigation bar or a row of cards.

Is Flexbox easier to learn than Grid?

For most beginners, yes, because Flexbox only considers one direction and achieves a lot with just a few properties (justify-content, align-items, gap). Grid has more concepts (columns, rows, named areas), but pays off for more complex layouts.

Do I still need to learn float-based layouts?

Not for new projects. Floats were the standard layout technique before Flexbox/Grid but are now considered outdated. You’ll mostly encounter them in older codebases.

What does 1fr mean in CSS Grid?

fr stands for “fraction” and describes a portion of the available space in the grid container. grid-template-columns: 1fr 2fr creates two columns, with the second one being twice as wide as the first.

Do Flexbox and Grid work in all browsers?

Yes, both have been fully supported by all modern browsers (Chrome, Firefox, Safari, Edge) for many years and are today’s industry standard for CSS layouts.