Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I force this CSS grid to wrap to a new line without specifying minmax sizes?

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

like image 325
Charlie Schliesser Avatar asked Dec 19 '18 15:12

Charlie Schliesser


People also ask

What does Minmax mean in CSS?

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.

How do I use autofit in CSS?

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

What is 1FR in CSS grid?

Each column is equal. 1FR=25% of the available space.


1 Answers

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>
like image 131
Michael Benjamin Avatar answered Oct 18 '22 13:10

Michael Benjamin