How to Achieve CSS Grid Wrapping without Media Queries using auto-fill or auto-fit?

Using CSS Grid auto-fill or auto-fit for Wrapping without Media Queries

In CSS grid, automatic wrapping without media queries is achievable by using the auto-fill or auto-fit keywords in the repeat() notation within grid-template-columns or grid-template-rows.

Auto-fill

The auto-fill keyword defines the number of grid cells to fill the container's available space. It will automatically adjust the number of columns to fit the container size without overflowing.

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

In this example, the grid-template-columns property specifies that the grid should automatically fill its width with as many 186px wide columns as possible.

Auto-fit

The auto-fit keyword behaves similarly to auto-fill, but it adjusts the size of the columns to fit the available space instead of the number of columns.

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

In this example, the grid-template-columns property specifies that the grid should automatically fit as many columns into the available space as possible, with each column having a minimum width of 186px and an automatic maximum width.

These techniques allow you to create a CSS grid that wraps its content without the need for media queries, dynamically adjusting to the available space.

The above is the detailed content of How to Achieve CSS Grid Wrapping without Media Queries using auto-fill or auto-fit?. For more information, please follow other related articles on the PHP Chinese website!