How to Wrap CSS Grid Items without Media Queries?

CSS Grid Wrapping without Media Queries

One common challenge in CSS grid is wrapping items to fit available space. In cases where media queries are undesirable, alternative approaches must be employed.

The auto-fill Solution

Consider using the variant of the repeat() notation. When specified as the repetition number, auto-fill automatically calculates the number of repetitions that fit within the available space without causing overflow.

Here's an example:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 186px);
}

.grid > * {
  background-color: green;
  height: 200px;
}

With auto-fill, the grid will adjust its column count based on the available width, ensuring that the items wrap nicely. This eliminates the need for specifying fixed column widths.

The above is the detailed content of How to Wrap CSS Grid Items without Media Queries?. For more information, please follow other related articles on the PHP Chinese website!