Coder Perfect

CSS grid wrapping


Is it possible to create a CSS grid wrap that doesn’t require the use of media queries?

In my scenario, I have a non-deterministic number of elements that need to be placed in a grid that wraps. I’m having trouble spacing things out using Flexbox. I’d also prefer to avoid a barrage of media enquiries.

Here’s an example of code:

Here’s a GIF to go with it:

As a side point, if anyone knows how I can avoid having to define the width of all the things like I do with grid-template-columns, that would be fantastic. I prefer that the kids choose their own breadth.

Asked by kentcdodds

Solution #1

As the first argument of the repeat() notation, use either auto-fill or auto-fit.

The repeat() notation has an auto-repeat variant:

repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

The grid will repeat as many tracks as possible without overflowing its container.

Given the example above (see image), the grid-container can only hold 5 tracks without overflowing in this situation. Because our grid only has four objects, a fifth is added as an empty track within the remaining area.

The explicit grid is completed by the remaining space, track #6. This indicates that there was not enough room to add another track.

The grid will continue to repeat as many tracks as feasible without exceeding its container’s capacity, however empty tracks will be collapsed to zero.

The fixed track sizing function of 0px is applied to a collapsed track.

In contrast to the auto-fill image example, the empty fifth track is collapsed, bringing the explicit grid to a close after the fourth item.

The difference between the two is noticeable when the minmax() function is used.

To range the items from 186px to a fraction of the grid container’s remaining space, use minmax(186px, 1fr).

When using auto-fill, after there is no more room to add empty tracks, the items will grow.

Because all vacant tracks are flattened to 0px when using auto-fit, the objects will grow to cover the remaining space.


Inspecting auto-fill tracks

Inspecting auto-fit tracks

Answered by Ricky

Solution #2

Within the repeat() function, you want either auto-fit or auto-fill:

grid-template-columns: repeat(auto-fit, 186px);

When you use a minmax() to allow for variable column sizes, the difference between the two becomes clear:

grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));

This allows you to change the size of your columns from 186 pixels to equal-width columns that span the entire width of the container. Auto-fill will fill the width with as many columns as it can. Even if you only have four grid items, if five columns fit, there will be a fifth empty column:

Instead, use auto-fit to avoid empty columns and, if necessary, stretch yours even further:

Answered by keithjgrant

Solution #3

Perhaps you’re seeking for auto-fill:

grid-template-columns: repeat(auto-fill, 186px);


You may use minmax with auto as the second argument to make better use of the available space:

grid-template-columns: repeat(auto-fill, minmax(186px, auto));


You could use auto-fit instead of auto-fill if you don’t want the empty columns.

Answered by alanbuchanan

Solution #4

A similar incident occurred to me. In addition to what you accomplished, I wanted to center my columns in the container and prevent empty columns from moving to the left or right:

.grid { 
    display: grid;
    grid-gap: 10px;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));

Answered by farrellw

Solution #5

Here’s what I came up with. Please excuse the fluff; I was in a particularly creative mood.

A parent div with fixed dimensions is my way. The rest is just a matter of fitting the information into that div.

The photos will be rescaled regardless of the aspect ratio. There will also be no heavy cropping.

Answered by I haz kode

Post is based on