Can CSS Grid Wrapping be Achieved Without Media Queries?

CSS Grid Wrapping Using auto-fill or auto-fit

Can CSS grid wrapping be achieved without resorting to media queries? This query stems from a requirement to place non-deterministic items in a grid with a desirable wrap behavior. Flexbox's drawbacks in ensuring proper spacing make this a less viable option.

Sample code:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-template-columns: 186px 186px 186px 186px;
}

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

auto-fill vs auto-fit

The solution lies in employing either auto-fill or auto-fit as the first parameter in the repeat() notation.

auto-fill

Upon specifying auto-fill as the repetition number, the number of repetitions will be adjusted to prevent the grid from overflowing the grid container.

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

The above is the detailed content of Can CSS Grid Wrapping be Achieved Without Media Queries?. For more information, please follow other related articles on the PHP Chinese website!