CSS Grid & Flexbox: The Complete Guide

Modern CSS Layout Techniques

CSS Grid and Flexbox have revolutionized how we build layouts on the web. Understanding when and how to use each one is essential for every frontend developer.

Flexbox: One-Dimensional Layouts

Flexbox excels at distributing space along a single axis — either horizontally or vertically. It's perfect for navigation bars, card rows, centering content, and aligning items within a container.

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

CSS Grid: Two-Dimensional Layouts

Grid shines when you need to control both rows and columns simultaneously. It's ideal for page layouts, dashboards, image galleries, and complex component arrangements.

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

When to Use Which?

A simple rule of thumb:

• Flexbox — When you're laying out items in a single direction (row or column)
• Grid — When you need control over both rows and columns
• Both together — Grid for the page layout, Flexbox for component internals

Responsive Design Without Media Queries

One of the most powerful features of modern CSS is creating responsive layouts without a single media query. grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) creates a responsive grid that automatically adjusts the number of columns based on available space.

The Gap Property

The gap property works in both Grid and Flexbox, replacing the need for margin hacks. It creates consistent spacing between items without affecting the outer edges.

The best layouts combine Grid and Flexbox — use each where it shines.