TIL - Grid Blowout

Today I learned that there is a thing named Grid Blowout. It's not as bad as sounds though.

One fine day, I had a normal grid going and things were going great.

<div class="container">
  <div>
    <div class="text">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam id
      corporis eligendi voluptates aliquam voluptas voluptate, libero soluta non
      repellendus reiciendis, inventore vero minima beatae? Quibusdam placeat
      veniam alias corrupti.
    </div>
  </div>
  <div></div>
</div>

body {
  background-color: white;
}
.container{
display: grid;
grid-template-columns: repeat(2, 1fr);
height: 100vh;
grid-gap: 10px;
}
.container>div{
border: 1px solid purple;
}

Then the requirements changed and text had to be on a single line with ellipsis as it's tail. I mean why not, just three lines or so.

<div class="container">
  <div>
    <div class="text">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam id
      corporis eligendi voluptates aliquam voluptas voluptate, libero soluta non
      repellendus reiciendis, inventore vero minima beatae? Quibusdam placeat
      veniam alias corrupti.
    </div>
  </div>
  <div></div>
</div>

body {
  background-color: white;
}
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
height: 100vh;
grid-gap: 10px;
}
.container>div {
border: 1px solid purple;
}
.text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

oh! no 😱 1fr isn't one fraction of the left space, any more. and the grid wasn't reacting to any changes I did to give it a max-width.

After two-three google searches with the words CSS Grid and width, I arrived on Chris Coyier's article on CSS Tricks that discussed the subject: Preventing a Grid Blowout.

The solution offered was simple, use minmax(0, 1fr) instead of just 1fr for spacing.

<div class="container">
  <div>
    <div class="text">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam id
      corporis eligendi voluptates aliquam voluptas voluptate, libero soluta non
      repellendus reiciendis, inventore vero minima beatae? Quibusdam placeat
      veniam alias corrupti.
    </div>
  </div>
  <div></div>
</div>

body {
  background-color: white;
}
.container {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
height: 100vh;
grid-gap: 10px;
}
.container>div {
border: 1px solid purple;
}
.text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

Chris explained that:

the minimum width of a grid column is auto.

which did not make much sense to me, so I went into the spec (like all normal people) looking for answers.

After some time, here is what I found:

When appearing outside a minmax() notation, implies an automatic minimum (i.e. minmax(auto, flex)).

So, without a minmax notation surrounding it a grid-item would take up the minimum space that it's content would have and then expand to 1fr. I did not find anything pertaining to why this was so in the original spec, but coming back to the article, I found a Rachel Andrew comment:

Grid then looks at the min-content size of the item. If the item has a size (you’ve given it a width) or has something in it with a size such as an image, the min-content size might be much bigger than the share of available space you think 1fr will give you. It’s easy to think of 1fr as being “one part of the space in the grid container” when it is really one part of the space left over. If there is space to grow then the tracks grow from that min-content size assigning space.

There is so much grid to be learned and to realise we haven't scratched the surface of what's possible.