CODEWITHSUNDEEP
htmlcsscss-grid
Calebmer
Calebmer

Reputation: 2860

CSS grid incorrectly constrains column width when min-width CSS is present

I have the following HTML. I would expect the columns to have the following widths:

First sum up the fr units: 0.370162 + 0.46852 + 0.281787 = 1.120469

Instead all browsers I've tested (Chrome, Safari, Firefox) renders columns with the following widths:

So column 3 is the right width. What's even stranger is if I remove the min-width: 150px CSS the columns are the expected widths! If I remove the min-width CSS and change grid-template-columns to grid-template-columns: minmax(150px, 0.370162fr) minmax(150px, 0.46852fr) minmax(150px, 0.281787fr) the issue still reproduces.

This feels like a CSS grid bug in how it handles minimum column widths. Or is there some corner of the spec that I'm missing?

My use case: I'm building a responsive table element with resizable columns with CSS grid.

*,
::before,
::after {
  box-sizing: border-box;
}

.table {
  display: grid;
  width: 600px;
  padding: 1px;
  gap: 1px;
  background-color: #ccc;
  grid-template-columns: 0.370162fr 0.46852fr 0.281787fr;
}

.cell {
  min-width: 150px;
  padding: 8px 12px;
  background-color: white;
}
<div class="table">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

Upvotes: 0

Views: 73

Answers (1)

Brett Donald
Brett Donald

Reputation: 14340

You need to use minmax(0, X.XXXXX) with your column widths, as per this answer.

.table {
  display: grid;
  width: 600px;
  padding: 1px;
  gap: 1px;
  background-color: #ccc;
  grid-template-columns: minmax(0, 0.370162fr) minmax(0, 0.46852fr) minmax(0, 0.281787fr);
  box-sizing: border-box;
}

.cell {
  min-width: 150px;
  padding: 8px 12px;
  background-color: white;
  box-sizing: border-box;
}
<div class="table">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>

Further reading:

Upvotes: 1

Related Questions