Multi-column layouts can be easily created with CSS Grid and Flexbox. 1. CSS Grid is suitable for designs that require precise control of rows and columns. Define column widths through grid-template-columns, such as 1fr 1fr 1fr 1fr 1fr, or use auto-fit to realize responsive automatic line wrapping; 2. Flexbox is suitable for linear layout, implements equal width columns through display: flex and flex: 1, and supports gap control spacing; 3. Responsive design can achieve column count changes under different screen sizes through media query or repeat (auto-fit, minmax()). The combination of the two is better.

Creating multi-column layouts in CSS isn't as tricky as it used to be. With modern tools like CSS Grid and Flexbox, you can build just about any layout you need without relying on floats or complicated hacks.

Use CSS Grid for Full Control

CSS Grid is the most powerful layout system in CSS today. It lets you define rows and columns explicitly, making it perfect for multi-column designs.

To create a basic grid with three equal-width columns, you can do something like this:

 .container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

This will create a container with three equally spaced columns and some space between them. If you want columns of different widths, you can mix units like 2fr 1fr 1fr so one column takes up more space.

Grid also allows you to name areas and place items exactly where you want them, which is super useful for complex page layouts.

Flexbox Works Great for Simpler Layouts

If your layout is more linear — like a row of boxes that should wrap on smaller screens — Flexbox might be a better fit.

Here's how to set up a simple flex layout:

 .container {
  display: flex;
  gap: 15px;
}

.column {
  flex: 1;
}

This makes all the columns stretch evenly and sit side by side. You can control spacing with the gap property, which works both in Flexbox and Grid now.

Flexbox doesn't handle vertical alignment as precisely as Grid does, but it's still great for things like navigation bars or card layouts where everything flows horizontally.

Responsive Multi-Column Layouts Need Media Queries (or Auto-Wrap)

Making your layout responsive usually means switching from multiple columns on desktop to stacked columns on mobile.

With Grid, you can use auto-wrapping:

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

This setup adjusts the number of columns based on available space. On narrow screens, each item stacks vertically; on wider screens, they spread out.

Alternatively, you can write media queries to adjust column count at specific breakpoints:

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

@media (min-width: 768px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Either approach works well — the choice depends on how much control you need over layout behavior.

You don't have to stick with one method either. Sometimes using Flexbox inside a Grid layout gives you the best of both worlds. Just keep it simple and test across screen sizes.

The above is the detailed content of How do you create multi-column layouts with CSS?. For more information, please follow other related articles on the PHP Chinese website!