CODEWITHSUNDEEP
csscss-grid
dmbaranov
dmbaranov

Reputation: 191

auto-fit and minmax() don't work inside nested grid

I have two nested grids - one for the layout and one for the part of my site (let's say it's a list of goods in the shop). My layout grid creates a container for the whole site, including navbar, sidebar, content, etc. And nested grid is responsible for the list of goods only. The problem is that auto-fit and minmax functions don't work in the nested grid. You can check this pen to see the case.

At first, try to change width of the content, you'll see that items are changing its position according to the auto-fit algorithm. But as soon as you uncomment display: grid; for the outer grid, it responsiveness gets broken. Could you please explain why this is happening and how I can fix it?

.outer-grid {
/*   display: grid; */
  grid-template-columns: 1fr 700px 1fr;
}

.inner-grid {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.item {
  background: red;
  border: 1px solid black;
}
<div class="outer-grid">
  <div class="inner-grid">
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
  </div>
</div>

Upvotes: 6

Views: 9085

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371153

The problem is that auto-fit and minmax functions don't work in the nested grid.

I think they do work. The problem appears to be something else.

Your nested grid exists in a column with a fixed width (700px). The primary container sees no reason to shrink that column, which would trigger the auto-fit function in the nested grid.

Here's something you may want to consider:

revised codepen

.outer-grid {
  display: grid;
  grid-template-columns: 1fr repeat(1, minmax(100px, 700px)) 1fr;
}

.inner-grid {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.item {
  background: red;
  border: 1px solid black;
}
<div class="outer-grid">
  <div class="inner-grid">
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
    <div class="item">Item</div>
  </div>
</div>

Upvotes: 4

Related Questions