Flexbox-like 'just put elements in a row' with CSS grid

Sometimes, we use flexbox simply to arrange items in a row with spacing. While flexbox with gap remains a convenient solution, it's worth remembering that CSS Grid offers a similar capability.

Consider this example:

.grid {
  display: grid;
  gap: 1rem;
  grid-auto-flow: column;
}

The items appear equally wide without content, but with content, they'll adjust based on their natural widths. For more control, use width, min-width, max-width on the grid items, or define grid-template-columns with repeat(auto-fit, minmax(min-content, 1fr)) to allow the minimum content width to determine the column width.

.grid {
  display: grid;
  gap: 1rem;
  grid-auto-flow: column;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
}

Flexible grids are incredibly powerful.

Finally, if you need the grid to only take up the width of its content (less than 100%, or even auto), remember that display: inline-grid; is an option.

The above is the detailed content of Flexbox-like 'just put elements in a row' with CSS grid. For more information, please follow other related articles on the PHP Chinese website!