CSS Grid minmax - minimum width not being adhered to

Question

I've been trying to create a 3 column layout containing cards that have a width of 1, 2 or 3 columns. To do this I've used CSS Grid with grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

My full code is here: Pen of the layout

I get some strange behaviour when the width of the container grows and shrinks. I would expect new columns to be added or removed based on the availability to add a new column of the minimum width (in this case 300px). THis doesn't seem to be happening - new columns are being added with a width <300px.

My SCSS is as follows:

.grid{
  max-width:1020px;
  margin:0 auto;
  padding:10px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-flow: dense;
  grid-gap:10px;
}
.card{
  padding: 5px;
  background: #CCC;

  grid-column: auto / span 1;
  &:nth-child(2), &:nth-child(5) {
    grid-column: auto / span 2;
  }
  &:nth-child(1), &:nth-child(6) {
    grid-column: 1 / end;
  }
}

Am I trying to do something that is beyond the capabilities of CSS Grid or am I doing something wrong in my code?

Answer 1

The issue is the implicit grid your are creating by defining grid-column:auto / span 2 which means that the element will take 2 columns so the grid need to at least contain 2 columns. When you the width is under 300px you explicitely create one column and the browse will implicitely create another one.

.grid {
  max-width: 1020px;
  margin: 0 auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-flow: dense;
  grid-gap: 10px;
}

.card {
  padding: 5px;
  background: #CCC;
  grid-column: auto / span 1;
}
.card:nth-child(2), .card:nth-child(5) {
  /*grid-column: auto / span 2;*/
}
.card:nth-child(1), .card:nth-child(6) {
  grid-column: 1 / end;
}

<p>Expected that new columns would only appear when 300px were available, but that doesn't seem to happen. New columns appear with much less available. Why???
<div class="grid">
  <div class="card"><h1>grid-column: 1 / end</h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam earum eum at nemo, illo voluptatem inventore, eveniet praesentium deleniti minus omnis saepe vitae explicabo similique natus? Est magnam aut veritatis?</div>
  <div class="card"><h1>grid-column: auto / span 2;</h1>Id at accusantium, nisi error ipsa debitis corporis laudantium harum, dolorem odio beatae ad porro ullam perferendis tenetur odit eligendi, quisquam quasi rem? Placeat dolorum totam dignissimos tempore quia dolore?</div>
  <div class="card"><h1>grid-column: auto / span 1;</h1>Provident maxime vitae perspiciatis voluptate quos rerum vel illo quas deleniti, voluptatem labore quibusdam. Eligendi, dolore, reprehenderit labore ipsum ipsam quod, nulla nihil harum dolor ipsa debitis quos officiis sed!</div>
  <div class="card"><h1>grid-column: auto / span 1;</h1>Fugiat minus sequi vel commodi cum inventore in quae alias fuga quis voluptates perferendis nostrum tempore a maxime voluptas illo, officiis harum ipsam qui recusandae esse fugit asperiores. Architecto, eveniet.</div>
  <div class="card"><h1>grid-column: auto / span 2;</h1>Quaerat delectus sint cumque inventore corporis alias consequatur totam nemo? Excepturi totam voluptatem voluptate! Exercitationem possimus amet voluptas corporis autem maiores nesciunt deserunt delectus! Ex praesentium ea debitis laborum doloribus.</div>
  <div class="card"><h1>grid-column: 1 / end;</h1>Illo inventore perferendis officia nisi voluptatum temporibus nemo laudantium fuga suscipit? Aliquid nihil rem obcaecati vitae placeat temporibus cumque nostrum illum cum, ab dicta sequi voluptatum saepe, ut, voluptatibus suscipit.</div>
</div>

Removing this you will still have issue because of grid-column: 1 / end; which means that start from column 1 to the area named end but you didn't specify any area with that name so the browser will implicitely create one.

You can clearly notice for the above example that the last column is not following the logic of minmax(300px, 1fr) because it's the column created for end

I suspect you want to use grid-column: 1 / -1; which mean from 1 until the end:

.grid {
  max-width: 1020px;
  margin: 0 auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-flow: dense;
  grid-gap: 10px;
}

.card {
  padding: 5px;
  background: #CCC;
  grid-column: auto / span 1;
}
.card:nth-child(2), .card:nth-child(5) {
  /*grid-column: auto / span 2;*/
}
.card:nth-child(1), .card:nth-child(6) {
  grid-column: 1 / -1;
}

<p>Expected that new columns would only appear when 300px were available, but that doesn't seem to happen. New columns appear with much less available. Why???
<div class="grid">
  <div class="card"><h1>grid-column: 1 / end</h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam earum eum at nemo, illo voluptatem inventore, eveniet praesentium deleniti minus omnis saepe vitae explicabo similique natus? Est magnam aut veritatis?</div>
  <div class="card"><h1>grid-column: auto / span 2;</h1>Id at accusantium, nisi error ipsa debitis corporis laudantium harum, dolorem odio beatae ad porro ullam perferendis tenetur odit eligendi, quisquam quasi rem? Placeat dolorum totam dignissimos tempore quia dolore?</div>
  <div class="card"><h1>grid-column: auto / span 1;</h1>Provident maxime vitae perspiciatis voluptate quos rerum vel illo quas deleniti, voluptatem labore quibusdam. Eligendi, dolore, reprehenderit labore ipsum ipsam quod, nulla nihil harum dolor ipsa debitis quos officiis sed!</div>
  <div class="card"><h1>grid-column: auto / span 1;</h1>Fugiat minus sequi vel commodi cum inventore in quae alias fuga quis voluptates perferendis nostrum tempore a maxime voluptas illo, officiis harum ipsam qui recusandae esse fugit asperiores. Architecto, eveniet.</div>
  <div class="card"><h1>grid-column: auto / span 2;</h1>Quaerat delectus sint cumque inventore corporis alias consequatur totam nemo? Excepturi totam voluptatem voluptate! Exercitationem possimus amet voluptas corporis autem maiores nesciunt deserunt delectus! Ex praesentium ea debitis laborum doloribus.</div>
  <div class="card"><h1>grid-column: 1 / end;</h1>Illo inventore perferendis officia nisi voluptatum temporibus nemo laudantium fuga suscipit? Aliquid nihil rem obcaecati vitae placeat temporibus cumque nostrum illum cum, ab dicta sequi voluptatum saepe, ut, voluptatibus suscipit.</div>
</div>

---

To better illustrate both issues, here is a simplifed example for the first one:

.box {
  display:grid;
  grid-template-columns:100px; /* I defined one column*/
  grid-gap:10px;
}
.box span:first-child {
  grid-column:span 2; /* I will create another column*/
}

.box span {
  height:50px;
  background:red;
}

<div class="box">
<span></span>
<span></span>
</div>

And for the second one:

.box {
  display:grid;
  grid-template-columns:100px; /* I defined one column*/
  grid-gap:10px;
}
.box span:first-child {
  grid-column:1/ a_radom_name; /* I will create another column*/
}

.box span {
  height:50px;
  background:red;
}


.box span:last-child {
  grid-column-end:a_radom_name; /* I can place other element on that column */
}

<div class="box">
<span></span>
<span></span>
</div>

If you inspect the grid you will notice that we will end with 2 columns (one implicit and one explicit)

---

The three properties grid-template-rows, grid-template-columns, and grid-template-areas together define the explicit grid of a grid container. ^ref

When grid items are positioned outside of these bounds, the grid container generates implicit grid tracks by adding implicit grid lines to the grid. These lines together with the explicit grid form the implicit grid. ^ref