Rethinking CSS Layouts

More Than Just Flex

Many developers know only display: block and display: none.
Let's rediscover the full power of CSS layout.

The Problem

  • Many developers only know display: flex
  • Grid, Flow-Root, Float, Container Queries are forgotten
  • This creates weak layouts and too much JavaScript
  • Fullstack thinking: everyone does a bit, no one masters CSS

Start with Semantic HTML

Before CSS, you need good HTML structure:


<header>…</header>
<nav>…</nav>
<main>…</main>
<article>…</article>
<section>…</section>
<footer>…</footer>

This makes code readable, accessible and structured.
CSS works better on semantic elements.

Grid as the Base

Grid layout with header, sidebar, main content, and footer

Grid is perfect for large page layouts

Master Layout with Grid


body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}

header { grid-area: header; }
aside  { grid-area: sidebar; }
main   { grid-area: main; }
footer { grid-area: footer; }

Floats and Flow-Root

Floating with text wrapping around it

Old tools, but still useful for specific cases

Text Around Images


img {
  float: left;
  margin: 0 1rem 1rem 0;
}

Clean Container Closure


.container {
  display: flow-root;
}

No clearfix hack anymore. Clean and simple.

Flex for Small Parts

Navigation bar with buttons in a row

Flex is strong for smaller components

Navigation and Button Groups


nav {
  display: flex;
  gap: 1rem;
}

Important: Don't use Flex for full page layouts.
Flex is for rows and columns, not for full grids.

Responsiveness

Layout alone is not enough. We need ways to react to different sizes:

  • Media Queries - React to screen width
  • Container Queries - React to container size

They work hand in hand with layout techniques

Media Queries

Card layout changing from single column to three columns

Classic and still needed - they react to screen width

Responsive Card Layout


.card-list {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .card-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

Container Queries

Two containers showing different card layouts based on container size

The real game changer - container size counts, not screen size

True Component Responsiveness


.card-list {
  display: grid;
  grid-template-columns: 1fr;
  container-type: inline-size;
}

@container (min-width: 600px) {
  .card-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

Component adapts itself, regardless of container size!

The Right Tool for the Job

Use Grid for:

  • Page layouts
  • Two-dimensional layouts
  • Complex positioning

Use Flex for:

  • Navigation bars
  • Button groups
  • One-dimensional layouts

Use Float for:

  • Text wrapping around images
  • Magazine-style layouts

Use Container Queries for:

  • True responsive components
  • Reusable UI elements

Conclusion

"If Flex is your only tool, every layout looks like a Flex problem."

Remember:

  • Start with semantic HTML
  • Use Grid for structure
  • Use Flex for components
  • Use Container Queries for true responsiveness

CSS will be strong and clear again!