Problem
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.
Playground:
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);
Demo: http://codepen.io/alanbuchanan/pen/wJRMox
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));
Demo: http://codepen.io/alanbuchanan/pen/jBXWLR
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 https://stackoverflow.com/questions/43129360/css-grid-wrapping