CODEWITHSUNDEEP
htmlcsscss-grid
abagshaw
abagshaw

Reputation: 6582

CSS Grid minmax with auto as min

I'm wanting to have a grid with two columns where the leftmost column will scale based on the width of its content, but will not exceed 33% of the grid width.

However, it appears that grid-template-columns: minmax(auto, 33%) auto does not work as intended. The leftmost column is always at 33% width even if the content is smaller.

I'm probably misunderstanding what minmax is supposed to accomplish. Is there some other way to achieve what I'm trying to do?

.main {
  display: grid;
  grid-template-columns: minmax(auto, 33%) auto
}

.firstcol {
  background: lightgreen;
}

.secondcol {
  background: lightblue;
}
<div class="main">
  <div class="firstcol">Short text</div>
  <div class="secondcol">Some more text</div>
</div>
<hr />
<div class="main">
  <div class="firstcol">This text is wayyyyyy to long and it should be wrapped</div>
  <div class="secondcol">Some more text</div>
</div>

Upvotes: 1

Views: 433

Answers (1)

Jan-Philipp Marks
Jan-Philipp Marks

Reputation: 1539

What about using grid-template-columns: fit-content(33%) 1fr

.main {
  display: grid;
  grid-template-columns: fit-content(33%) 1fr;
}

.firstcol {
  background: lightgreen;
}

.secondcol {
  background: lightblue;
}
<div class="main">
  <div class="firstcol">Short text</div>
  <div class="secondcol">Some more text</div>
</div>
<hr />
<div class="main">
  <div class="firstcol">This text is wayyyyyy to long and it should be wrapped</div>
  <div class="secondcol">Some more text</div>
</div>

Upvotes: 5

Related Questions