12

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

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Charlie Schliesser
  • 7,851
  • 4
  • 46
  • 76
  • I think this might help you, I had a similar question, since I wanted to have a minimum number of columns but be able to wrap them even if there was space remaining https://stackoverflow.com/q/53434024/8437694 – IvanS95 Dec 19 '18 at 15:57
  • 3
    AFAIK you always have to be specific with grid-items width in some way – IvanS95 Dec 19 '18 at 15:58

2 Answers2

12

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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • 2
    Beautiful. I can get behind the idea of forcing a minimum width and letting the rest auto calculate. I've settled on this which does what I'm looking for – thanks Michael! `grid-template-columns: repeat(auto-fit, minmax(10rem, auto));` – Charlie Schliesser Dec 19 '18 at 19:59
  • 1
    Looks good. Yeah, `auto` is even better because it does what you want and makes the code easier to understand. – Michael Benjamin Dec 19 '18 at 20:07
0

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 %...

AbsoluteBeginner
  • 2,160
  • 3
  • 11
  • 21
user14804027
  • 1