CODEWITHSUNDEEP
htmlcsscss-grid
tonitone106
tonitone106

Reputation: 159

When does a column shrink under its max value?

The first column is set to minmax(200px, 400px). I understand it's going to try and always be 400px 'when it can' and when it has to shrink the most it can shrink to is 200px.

When I start making the viewport extremely small it does shrink under 400px. My question is what determines when it shrinks under 400px?

.grid-container {
  display: grid;
  grid-template-columns: minmax(200px, 400px) 1fr 1fr;
}

.grid-container > div:nth-child(1) {
  background-color: red;
}

.grid-container > div:nth-child(2) {
  background-color: orchid;
}
.grid-container > div:nth-child(3) {
  background-color: yellowgreen;
}
<div class="grid-container">
  <div>I am column 1</div>
  <div>I am column 2</div>
  <div>I am column 3</div>
</div>

Upvotes: 2

Views: 81

Answers (1)

MilkyTech
MilkyTech

Reputation: 1927

1fr has a minimum width which is the width of the content. If the content has a fixed width, that is the minimum. If the content is text, the minimum is the width of the longest word (in this case, the word "column"). So here your first column will start to shrink below 400px when both of the 1fr columns have reached their minimum width and the width of the viewport starts to go below
(400px + column 2 min width + column 3 min width)

Upvotes: 2

Related Questions