Have you ever used a grid system, and if so, what do you prefer?

TL;DR

A strong modern answer is to use CSS Grid for two-dimensional page or component layouts, Flexbox for one-dimensional alignment, and a framework grid when its shared tokens and conventions genuinely help the team. The choice should preserve logical source order and respond to the component's content, not merely reproduce a fixed 12-column system.

Have you ever used a grid system, and if so, what do you prefer?

Choosing the layout tool

Older grid systems divided a page into columns using floats and calculated gutters. Native layout now covers most of those use cases:

Grid and Flexbox are complementary. A page can use Grid for its card layout and Flexbox for the actions inside each card.

A content-responsive grid

This layout creates as many columns as fit without naming device-specific breakpoints:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}

.card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

The min(100%, 16rem) expression prevents a track from overflowing a container narrower than 16rem. An explicit breakpoint is still appropriate when the content needs a deliberate layout change rather than simply more available columns.

Practical selection criteria

Whichever system is used:

• Keep the DOM in a sensible reading and focus order; do not use visual reordering to repair poor source order.
• Prefer design-system spacing and track tokens when consistency matters across teams.
• Check narrow containers, zoomed text, long translations, and missing or unusually long content.
• Avoid importing an entire framework only for a layout that a few native declarations can express.

Further reading

• CSS Grid Layout (MDN)
• CSS Flexible Box Layout (MDN)
• CSS Grid Layout accessibility (MDN)

Exercises