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

• Column 1 = ~198px (600 * 0.370162 / 1.120469)
• Column 2 = ~250px (600 * 0.46852 / 1.120469)
• Column 3 = ~150px (600 * 0.281787 / 1.120469)

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

• Column 1 = ~165px
• Column 2 = ~209px
• Column 3 = ~150px

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>

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

• Column 1 = ~198px (600 * 0.370162 / 1.120469)
• Column 2 = ~250px (600 * 0.46852 / 1.120469)
• Column 3 = ~150px (600 * 0.281787 / 1.120469)

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

• Column 1 = ~165px
• Column 2 = ~209px
• Column 3 = ~150px

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>

• html
• css
• css-grid

Share Improve this question Follow edited Jan 29 at 22:32 CcmU 1,0361414 silver badges3131 bronze badges asked Jan 29 at 16:34 CalebmerCalebmer 2,88088 gold badges3030 silver badges4444 bronze badges 3

• I've just noticed, removing padding: 1px fixes the issue. So that may be part of the problem? – Calebmer Commented Jan 29 at 16:41
• There is a practical application. These values are reached based on user drag-and-drop interactions. We represent column widths in fr units instead of an absolute unit so that they work in responsive designs. While the user is dragging we take the px width they've moved the column and convert it into fr units, hence the finely tuned values. If floating point rounding is the issue we can probably round these values to something more friendly before writing to the DOM. – Calebmer Commented Jan 29 at 17:13
• In my actual application, I've added a processing step to round the column widths to cleaner values (small integers 100-400 with decimals rounded to the hundreds place) and I haven't found a reproduction for this issue yet. This being a floating point issue would still surprise me, imprecision at the 14th decimal place I wouldn't expect to affect column width by ~40px? – Calebmer Commented Jan 29 at 17:28

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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:

• Preventing a grid blowout
• Equal width columns in CSS grid are kinda weird