DEV Community

Emmanuel Elikwu
Emmanuel Elikwu

Posted on

10 CSS Layouts Every Developer Should Know (Grid & Flexbox Explained the Simple Way)

#beginners #css #tutorial #webdev

You've seen these layouts a hundred times, blogs, dashboards, Pinterest boards, magazine sites. But when you sit down in front of a design file, do you know which CSS tool to reach for, or are you just guessing until something sticks?

In this post I'm breaking down 10 of the most common web layouts, and for each one I'm answering the question that actually matters: why this tool and not the other one? Once that clicks, you stop memorizing patterns and start understanding layout.

The two golden rules

Before any code, lock these in:

  • Flexbox is 1-directional. It arranges things in a single row, or a single column. One direction at a time.
  • Grid is 2-directional. Rows and columns, working together, at the same time.

That's basically the whole decision tree. Everything below is just applying it.

If you want to go deeper and build full responsive pages faster (not just isolated patterns), I put together a complete guide Build Any Responsive Layout Faster with Grid and Flexbox that walks through building real pages component by component. Worth a look if this post is useful to you.

Quick setup

Drop this reset at the top of any project before building layouts:

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, sans-serif;
  color: #333;
  background-color: #f8f9fa;
  line-height: 1.5;
}
Enter fullscreen mode Exit fullscreen mode

Now let's build.

1. The Two-Column Layout

Sidebar for navigation, big open area for content, every SaaS dashboard and docs site ever. The ask-yourself question: am I arranging one line of things, or a whole grid of space? Sidebar and content sitting side by side is two dimensions working together, so Grid.

.two-column-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  min-height: 100vh;
  padding: 20px;
}
Enter fullscreen mode Exit fullscreen mode

1fr does the heavy lifting — "give this element whatever space is left over."

2. The Split Screen

A page cut cleanly in half — login vs. sign-up, before vs. after. Grid makes this a one-liner:

.split-screen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.pane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
}
Enter fullscreen mode Exit fullscreen mode

Notice Grid handles the big structure, Flexbox centers the content inside each half. They're not rivals, they're teammates.

3. The Asymmetrical Layout

The one that makes beginners panic when they see it on a portfolio or SaaS landing page. It's just span:

.box-1 { grid-column: span 2; grid-row: span 2; }
.box-2, .box-3 { grid-column: span 1; }
.box-4 { grid-column: span 2; }
Enter fullscreen mode Exit fullscreen mode

You're telling one box to stretch across multiple columns and rows instead of sitting in a single cell. That's how you get a big focal box with smaller boxes tucked around it.

4. The F-Shape Layout

Eye-tracking studies show users scan pages in a rough "F" across the top, down the left, across again. grid-template-areas lets you draw this layout in code:

.f-shape-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main";
  grid-template-columns: 200px 1fr;
  gap: 16px;
}
Enter fullscreen mode Exit fullscreen mode

It reads like an ASCII map of your page, one of the most underrated CSS features out there.

5. The Z-Shape (Zig-Zag) Layout

Image-left-text-right, then the next section flips to text-left-image-right. That alternating rhythm keeps the eye moving down a landing page. This one's Flexbox, not Grid, you're arranging a single row at a time:

.z-row {
  display: flex;
  align-items: center;
  gap: 30px;
}

.z-row.reverse {
  flex-direction: row-reverse;
}
Enter fullscreen mode Exit fullscreen mode

One .reverse class, and you flip the direction instead of writing separate HTML for each section.

6. The Card Grid

Product grids, blog previews, photo galleries. The line that will change your life if you haven't used it:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
Enter fullscreen mode Exit fullscreen mode

Translation: "fit as many columns as you can, each at least 250px wide, and stretch them to fill the space." That replaces an entire pile of media queries. Resize the browser and watch it reflow, no breakpoints, no JS.

7. The Featured Media Layout

One big video or image on one side, supporting text on the other, think a course platform or a watch page. Grid, but weighted:

.featured-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}
Enter fullscreen mode Exit fullscreen mode

Grid isn't just for equal boxes — you're directing visual hierarchy with pure ratios.

8. The Masonry Layout

Pinterest. Staggered boxes of different heights. The rock-solid, widely-supported approach is CSS Multi-Column:

.masonry-layout {
  column-count: 3;
  column-gap: 16px;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 16px;
}
Enter fullscreen mode Exit fullscreen mode

Don't skip break-inside: avoid — without it, a card can get sliced in half across two columns.

9. The Magazine Layout

A big lead story, a sidebar of smaller stories, news and editorial sites live on this. Instead of span, place things by exact grid-line coordinates for full control:

.magazine-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}

.lead-story { grid-column: 1 / 2; grid-row: 1 / 2; }
.side-stories { grid-column: 2 / 3; grid-row: 1 / 3; }
Enter fullscreen mode Exit fullscreen mode

10. Fixed Navigation

The navbar that stays glued to the top while everything scrolls beneath it. Mostly Flexbox for alignment, plus one small but powerful line:

.fixed-nav {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

sticky isn't the same as fixed — it stays in normal document flow until you scroll past it, then locks in place. It's the behavior most devs actually want, even when they reach for fixed out of habit.

The pattern behind all 10

Don't memorize 10 layouts — internalize this:

  • Two things side by side that need real structure → Grid
  • One direction, one line of items → Flexbox
  • Complex named regions (header, sidebar, main) → grid-template-areas
  • Responsive cards with zero media queries → auto-fit + minmax()

Every layout you'll ever be handed in a design file is some combination of these ideas.

I walk through building all of these live, with a few extra interactive patterns, in the full video — check it out here:

If this was useful, drop a comment with which layout tripped you up the most, I'll dig into it in a future post.

Top comments (0)