Modern CSS Layout | Flexbox & Grid Guide 2025

Why Modern CSS Changes Everything

For decades, web developers fought with floats, clearfixes, and browser inconsistencies. Layout was an afterthought in CSS. Today, Flexbox and Grid put layout first—they were designed specifically for the job.

💡 The paradigm shift

Floats were never meant for layout—they were for wrapping text around images. Flexbox and Grid are purpose-built layout engines. The difference is night and day.

Universal Browser Support

Both Flexbox and Grid now enjoy 98%+ browser support. Unless you're supporting Internet Explorer (which ended support in 2022), you can use these features today without worry.

CSS Flexbox

Flexbox is designed for one-dimensional layouts—arranging items in a row or a column. It's perfect for navigation bars, card layouts, centering elements, and distributing space.

Basic Flexbox

flexbox.css

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

.item {
  flex: 1;
}

Live Demo

Flex 1

Flex 2

Flex 3

Key Flexbox Properties

display: flex — Creates a flex container
justify-content — Aligns items horizontally
align-items — Aligns items vertically
gap — Perfect spacing without margin hacks
flex: 1 — Equal growth distribution

CSS Grid

Grid is for two-dimensional layouts—simultaneously controlling rows and columns. It's the ultimate layout tool for page structures, dashboards, and complex arrangements.

Responsive Grid

grid.css

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

Live Demo

1

2

3

4

🎯 No media queries needed

The auto-fit and minmax() combination creates responsive grids automatically. Items wrap to new lines when they can't fit at their minimum size.

Flexbox vs Grid

Use Case	Best Choice	Why
Navigation bars	Flexbox	Single row, easy centering
Card grids	Grid	Two-dimensional control
Page layouts	Grid	Headers, sidebars, content areas
Form alignment	Grid	Labels and inputs align perfectly
Centering	Either	Both solve this elegantly

Modern Best Practices

Start with Grid for page layouts — Use it for your main structure
Use Flexbox for components — Cards, buttons, navigation
Embrace the gap property — Stop using margins for spacing
Use auto-fit and auto-fill — Let Grid handle responsive breakpoints
Try subgrid — Now widely supported for nested alignment

🎉 We've come a long way

Modern CSS layouts haven't required floats since 2018. If you're still using float: left for layout, you're working harder than necessary. See our archived float tutorial to appreciate how far we've come!