How to Force This CSS Grid to Wrap to a New Line Without Specifying Minmax Sizes

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

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>

CSS grid wrapping

Use either auto-fill or auto-fit as the first argument of the repeat() notation.

<auto-repeat> variant of the repeat() notation:

repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

---

auto-fill

When auto-fill is given as the repetition number, if the grid
container has a definite size or max size in the relevant axis, then
the number of repetitions is the largest possible positive integer
that does not cause the grid to overflow its grid container.

^{https://www.w3.org/TR/css-grid-1/#valdef-repeat-auto-fill}

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

How to get grid items of different lengths to wrap?

Grid items do not actually wrap. The reason you see grid items "wrapping" to the next row is really because the explicit grid is being altered to keep within the constraints stipulated by minmax(). The number of columns generated by repeat() is proportional to the used width of the grid container, and the grid items are laid out one by one according to the number of columns, with new rows being created as necessary.

So, it is not possible to force the second grid item to wrap when there are two columns and there is room in the explicit grid to insert that grid item in the second column. Besides, even if you could tell the second grid item to "wrap", it would mean placing it in a new row in the first column, so its layout will be governed by the first column and not the second. Having it still be sized according to the second column would, of course, break the grid layout entirely.

If the intention is to accommodate smaller screens by wrapping elements to new lines, flex layout should be used, not grid layout. Grid layout is not suitable for this purpose.

How can I get my 2nd grid-item to wrap to a new row when the space left for it on the original row falls below a certain amount?

This is not a CSS grid job, it's a flexbox job

.wrapper {
  border: 5px solid pink;
  display: flex;
  flex-wrap:wrap;
}

.wrapper > *:nth-child(1) {
  background-color: purple;
  width: 200px;
}

.wrapper > *:nth-child(2) {
    background-color: orange;
    flex-basis:70px;
    flex-grow:1;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
</div>

How to make a CSS grid wrap automatically if the templates are set for columns and rows?

You can use auto flow to form grid (like @vals's answer suggests) and then set the pattern in which order it should be populated via set of :nth-child() rules:

.wrapper {

    border: 2px solid #f76707;

    border-radius: 5px;

    background-color: #fff4e6;

}

.wrapper > div {

    border: 2px solid #ffa94d;

    border-radius: 5px;

    background-color: #ffd8a8;

    padding: 1em;

    color: #d9480f;

}

.wrapper {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-auto-flow: row dense;

  grid-gap: 10px;

}

.wrapper > :nth-child(6n + 1),

.wrapper > :nth-child(6n + 2) {

  grid-column: 1;

}

.wrapper > :nth-child(6n + 3),

.wrapper > :nth-child(6n + 4) {

  grid-column: 2;

}

.wrapper > :nth-child(6n + 5),

.wrapper > :nth-child(6n + 6) {

  grid-column: 3;

}

<div class="wrapper">

  <div>One</div>

  <div>Two</div>

  <div>Three</div>

  <div>Four</div>

  <div>Five</div>

  

  <div>Six</div>

  <div>Seven</div>

  <div>Eight</div>

  <div>Nine</div>

  <div>Ten</div>

  <div>Eleven</div>

  <div>Twelve</div>

  

  <div>Thirteen</div>      

  <div>Fourteen</div>      

  <div>And so on</div>

</div>

Getting columns to wrap in CSS Grid

Neither HTML or CSS have any concept of when descendants of a container wrap.

Essentially, the browser renders the document during an initial cascade. It does not reflow the document when a child wraps.

Therefore, to change the number of columns, you will need to set a width limit somewhere along the line or use media queries.

Here's a more in-depth explanation: Make container shrink-to-fit child elements as they wrap

---

If you can define a column width, then grid layout's auto-fill function makes wrapping easy.

In this example, the number of columns is based entirely on the width of the screen:

#grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* see notes below */

  grid-gap: 1em;

}

#grid > div {

  background-color: #ccddaa;

}

<div id="grid">

  <div>text</div>

  <div>text</div>

  <div>text</div>

  <div>text</div>

  <div>text</div>

  <div>text</div>

  <div>text</div>

  <div>text</div>

  <div>text</div>

</div>

How to limit the amount of columns in larger viewports with CSS Grid and auto-fill/fit?

Use this syntax:

grid-template-columns: 260px 260px 260px;

Or

grid-template-columns: repeat(3,260px);

Instead of this:

grid-template-columns: repeat(auto-fill, 260px);

Use media queries to set less columns on smaller screens.

Also if the row and column gap is the same you can use grid-gap.

Documentation

.grid-container{

  display: grid;

  grid-template-columns: 260px 260px 260px;

  grid-gap: 18px;

  background-color: #fff;

  color: #444;

  justify-content: center; 

}

.card {

   border: 1px solid #000;

   width: 260px;

   height: 260px;

}

<div class="container">

   <div class="grid-container">

   <div class="grid-item">

      <div class="card"></div>

   </div>

   <div class="grid-item">

      <div class="card"></div>

   </div>

   <div class="grid-item">

      <div class="card"></div>

   </div>

   <div class="grid-item">

      <div class="card"></div>

   </div>

   <div class="grid-item">

      <div class="card"></div>

   </div>

   <div class="grid-item">

      <div class="card"></div>

   </div>

</div>

</div>

---

Related Topics