Automatically wrap elements to fit parent width and on demand [duplicate] - css

Question

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

Answer 1

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>

Answer 2

Spec the grid dim in %, like:
grid-template-columns: 25% 25% 25% 25%;
or
grid-template-columns: 25% auto auto auto;
The text will auto wrap inside the grid element defined as a %...