How to Achieve CSS Grid Wrapping Without Media Queries?

Achieving CSS Grid Wrapping Without Media Queries

In the realm of CSS grid, achieving a desirable wrapping effect without resorting to media queries can be a common challenge. Let's delve into a solution that employs the repeat() notation with auto-fill to achieve this elusive goal.

Revamping the Approach with repeat(auto-fill)

Instead of explicitly specifying the width of the grid items through grid-template-columns, we can utilize the repeat() notation with auto-fill as the repetition number. Auto-fill dynamically calculates the maximum number of columns that can be accommodated within the grid container without overflowing.

Clarifying auto-fill

The auto-fill variant of repeat() determines the number of repetitions based on the following principle: if the grid container has a predefined or maximum size in the relevant axis, the number of columns will match the highest positive integer that does not cause the grid to extend beyond its container.

Sample Implementation

To demonstrate the power of auto-fill, let's enhance the initial code snippet:

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

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

With this adjustment, our grid items will dynamically adjust their widths to accommodate the available space, seamlessly wrapping to new lines as needed.

Note on Item Width Flexibility

Additionally, auto-fill allows for the children to specify their own widths, eliminating the need for hard-coded widths. This approach enhances the flexibility and responsiveness of the grid layout.

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