Why are empty columns not collapsing in CSS Grid?

Question

I have started learning CSS Grid from yesterday and I have a doubt.

I was reading about how can I use auto-fit to place the elements evenly in the rows from this website.

The post says that

auto-fit FITS the CURRENTLY AVAILABLE columns into the space by expanding them so that they take up any available space. The browser does that after FILLING that extra space with extra columns (as with auto-fill) and then collapsing the empty ones.

It says that empty columns will be collapsed and the remaining element will share the extra space evenly.

However, when I was trying to use this in my code I don't find the blank columns collapsing and the remaining valid elements taking extra space.

.container {
  height: 100%;
  display: grid;
  grid-auto-rows: 150px;
  gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.container > div {
  text-align: center;
  font-weight: 600;
  font-size: 30px;
  color: white;
}

div > img {
  height: 100%;
  width: 100%;
}

body {
  margin: 10px;
}

<div class="container">
  <div><img src="./1.jpeg" alt="image" /></div>
  <div><img src="./2.jpeg" alt="image" /></div>
  <div><img src="./3.jpeg" alt="image" /></div>
  <div><img src="./4.jpeg" alt="image" /></div>
  <div><img src="./5.jpeg" alt="image" /></div>
  <div><img src="./6.jpeg" alt="image" /></div>
  <div><img src="./7.jpeg" alt="image" /></div>
  <div><img src="./8.jpeg" alt="image" /></div>
  <div><img src="./9.jpeg" alt="image" /></div>
  <div><img src="./10.jpeg" alt="image" /></div>
  <div><img src="./11.jpeg" alt="image" /></div>
  <div><img src="./12.jpeg" alt="image" /></div>
  <div><img src="./13.jpeg" alt="image" /></div>
  <div><img src="./14.jpeg" alt="image" /></div>
  <div><img src="./15.jpeg" alt="image" /></div>
  <div><img src="./16.jpeg" alt="image" /></div>
  <div><img src="./17.jpeg" alt="image" /></div>
  <div><img src="./18.jpeg" alt="image" /></div>
</div>

Here's is the OUTPUT:

When I inspected the output I found that the last row's blank columns have not collapsed. Why?

Also why the last two images have not taken equal remaining space which it should take?

When there's wrapping `auto-fit` is the same as `auto-fill` the effect you're after happens only when there's no wrapping,the columns will still shrink and expand in conjunction with splitting the width evenly between them, the last row's empty columns can't be collapsed because it's already created up above, if you collapse those you'll the whole columns. As of now There's no such thing as `cell` in CSS Grid there's only columns and rows most commonly refereed to as `tracks` — Rainbow, May 05 '20 at 15:27
https://www.w3.org/TR/css3-grid-layout/#grid-track-concept @ZohirSalak — Michael Benjamin, May 05 '20 at 17:28
@MichaelBenjamin I misspoke, What I meant was we can't address the grid cells alone and size them as we see fit they're bound by the sizes of the rows and columns. — Rainbow, May 05 '20 at 17:39

Michael Benjamin · Accepted Answer · 2020-05-05T19:34:35.547

When I inspected the output I found that the last row's blank columns have not collapsed. Why?

Because the columns for the grid were already established in the first row.

Also why the last two images have not taken equal remaining space which it should take?

Because there are column tracks standing in the way.

Once grid items start wrapping you can infer three things:

All space in the first row has been consumed.
All columns tracks in the grid have been created.
There is no extra space available for auto-fit to work.

All of this can be seen in the image you posted in your question.

Here's how auto-fit works when more space is available.

.container {
  display: grid;
  grid-auto-rows: 150px;
  gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.container > div {
  border: 1px dashed red;
}

div > img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

<div class="container">
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
</div>

More details: What is the difference between auto-fill and auto-fit?

If you need the columns to collapse in the last row, then consider using flexbox instead of grid.

.container {
  display: flex;
  flex-wrap: wrap;
}

.container > div {
  flex: 1 0 150px;
  height: 150px;
  border: 1px dashed red;
}

div > img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

<div class="container">
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
  <div><img src="http://i.imgur.com/60PVLis.png" alt="image" /></div>
</div>

More details: Targeting flex items on the last or specific row

Why are empty columns not collapsing in CSS Grid?

1 Answers1