I come from a heavy div/float background to build responsive sites (e.g. Bootstrap 3, Foundation) and used Flex box briefly but have been attempting to use Grid everywhere since it's been really great at solving a number of problems. I seem to run into "simple" problems like this all too often and feel like I'm missing some basics, and can't find the answer in docs. Anyways, to the code.
Given a grid setup like so:
display: grid;
grid-auto-columns: max-content;
grid-auto-flow: column;
the content doesn't wrap to a new row once it's filled the width of its parent element. Ideally, I'd be able to have it auto-wrap without pre-defining exact pixel measurements such as grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
. This doesn't seem to work for my needs – I'd have to define multiple grid-template-columns
measurements for different viewports, and know what a good width is for the items inside the columns. I'd much rather say grid-auto-columns: max-content;
and then have items simply wrap to a new line.
Is this possible with grid? What am I missing/misunderstanding?
See Codepen with a full example demonstrating the problem: https://codepen.io/csdv/pen/OrbrzJ
The minmax() CSS function defines a size range greater than or equal to min and less than or equal to max. It is used with CSS Grids.
auto-fit behavior: “make whatever columns you have fit into the available space. Expand them as much as you need to fit the row size. Empty columns must not occupy any space. Put that space to better use by expanding the filled (as in: filled with content/grid items) columns to fit the available row space.”
Each column is equal. 1FR=25% of the available space.
I don't see how this is possible with the current iteration of CSS Grid.
As you've already discovered, you would at least need to define a fixed minimum width on the columns, in order to force a wrap at some point.
Unfortunately, with automatic repetitions, the minimum length cannot be auto
, min-content
or max-content
alone, because that is forbidden in the specification.
Here's as close as you can get with Grid, as far as I can tell:
.btn-tabs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(75px, max-content));
width: 20rem;
}
/* original demo styles */
.btn {
font-family: "Arial", sans-serif;
border-bottom: 4px solid #77aaee;
color: #77aaee;
padding: .6rem;
text-decoration: none;
}
<div class="btn-tabs">
<a class="btn" href="#">Button 1</a>
<a class="btn" href="#">Button 2</a>
<a class="btn" href="#">Button 3</a>
<a class="btn" href="#">Button 4</a>
<a class="btn" href="#">Button 5</a>
<a class="btn" href="#">Button 6</a>
</div>
Flexbox may be a good alternative, as it seems to work with your requirements:
.btn-tabs {
display: flex;
flex-wrap: wrap;
width: 20rem;
}
/* original demo styles */
/* notice no width defined on flex items, but they wrap anyway */
.btn {
font-family: "Arial", sans-serif;
border-bottom: 4px solid #77aaee;
color: #77aaee;
padding: .6rem;
text-decoration: none;
}
<div class="btn-tabs">
<a class="btn" href="#">Button 1</a>
<a class="btn" href="#">Button 2</a>
<a class="btn" href="#">Button 3</a>
<a class="btn" href="#">Button 4</a>
<a class="btn" href="#">Button 5</a>
<a class="btn" href="#">Button 6</a>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With