Auto Grid Columns, Without Wrapping to Next Row

Auto Grid columns, without wrapping to next row

You simply make the flow to be column like below:

.boxes {
  display: grid;
  grid-auto-columns: 381px;
  grid-auto-flow: column; /* this will do the trick */
  grid-gap: 10px;
}

.boxes>* {
  height: 50px;
  background: red;
}

<div class="boxes">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

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 only columns, no wrap and with auto-fill covering end gap

Use grid-auto-columns: 25% then consider a pseudo element on the first element of each group to create the extra space:

section {
  display: grid;
  grid-auto-columns: calc((100% - 3*10px)/4); /* we remove 3 gaps here */
  grid-gap: 10px;
  grid-auto-flow: column;
  overflow: auto;
}

article {
  background-color: lightblue;
  white-space: nowrap;
  margin:10px 0;
  height: 40px;
  position:relative;
}

article:nth-child(4n + 1)::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  height:1px; /* a small height */
  width:calc(400% + 3*10px); /* we consider 3 gaps here */
  pointer-events: none; /* avoid any interaction */
}

<section>
  <article>Article 1</article>
  <article>Article 2</article>
  <article>Article 3</article>
  <article>Article 4</article>
  <article>Article 5</article>
  <article>Article 6</article>
</section>

<section>
  <article>Article 1</article>
  <article>Article 2</article>
  <article>Article 3</article>
  <article>Article 4</article>
  <article>Article 5</article>
  <article>Article 6</article>
  <article>Article 7</article>
  <article>Article 8</article>
</section>

<section>
  <article>Article 1</article>
  <article>Article 2</article>
  <article>Article 3</article>
</section>

How can I dynamically add a column in CSS grid without wrapping to a new row?

The CSS property you looking for is grid-auto-flow.

Here is this repl for a simple example implementation.

.wrapper {
  display: grid;
  grid-auto-flow: column;
}

.wrapper {
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  padding: 10px 0;
  text-align: center;
  font-size: 150%;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box c">D</div>
  <div class="box c">C</div>
  <div class="box c">D</div>
</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>

MUI: How to prevent Grid items from going on next row?

Because Grid uses flexbox under the hood. You can simply set the wrap value to nowrap in your Grid container, you can see the full API of Grid component here.

<Grid
  container
  wrap="nowrap" // --> add this line to disable wrap
  sx={{ overflow: "auto" }} // --> add scrollbar when the content inside is overflowed
  spacing={8}
>
  {...}
</Grid>

Live Demo

Prevent Bootstrap 4 auto-fill column from wrapping to next row

When a flex item contains child elements with text that should be truncated, layout can be broken.

My first solution is add min-width: 0 to problem-div's parent (take a look at css trick article: https://css-tricks.com/flexbox-truncated-text/):

img {  width: 16px;  height: 16px;}
label {  margin: 0;  font-weight: 600;}
.form-text {  margin: 0;}
#problem-div {  background-color: #e0FFFF;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<body class="container-fluid">
  ...  <!-- lots of stuff -->
  <div class="card">    <div class="card-header bg-warning">      <div class="row">        <div class="col-auto text-nowrap">          <img src=".../icon.png" />          <h6 class="pl-1 mt-1 font-weight-bold float-right">Label</h6>        </div>        <div class="col row small">          <div class="form-group col-3">            <label>ID</label>            <span class="form-text">1234567</span>          </div>          <div class="form-group col-3">            <label>Name</label>            <span class="form-text">My Name</span>          </div>          <div class="form-group col-3">            <label>Type</label>            <span class="form-text">Category-A</span>          </div>          <div class="form-group col-3">            <label>Code</label>            <span class="form-text">ABCDEFG</span>          </div>        </div>      </div>    </div>    <div class="card-body">      <div class="row">        <div class="col-auto text-nowrap invisible"> <img src=".../icon.png" />          <h6 class="pl-1 mt-1 font-weight-bold float-right">Label</h6>        </div>        <div class="col small" style="min-width: 0">          <!-- Problem Div, breaks the auto-fill feature of its parent when "text-truncate" class is applied. -->          <div id="problem-div" class="text-truncate">            <label>Display Field Label</label>            <span class="form-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>          </div>        </div>      </div>    </div>  </div>  ...  <!-- more stuff -->
</body>

---

Related Topics