Percentages in minmax CSS grid causing overflow

Question

I'm trying to build a responsive CSS grid with three columns that wrap when necessary. I want the minimum column width to be 200px, otherwise use the percentage 30%.

I believe I can use the minmax CSS calculation to do this, but some strange overflow error occurs when I use percentages rather than pixels.

.wrapper-pix {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 360px));
}

.wrapper-percent {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 30%));
}

.box-pix{
  background: #4299E1;
  height: 200px;
}

.box-percent{
  background: #F56565;
  height: 200px;
}

<div class="wrapper-pix">
  <div class="box-pix"></div>
  <div class="box-pix"></div>
  <div class="box-pix"></div>
</div>

<div class="wrapper-percent">
  <div class="box-percent"></div>
  <div class="box-percent"></div>
  <div class="box-percent"></div>
</div>

Please also see this CodePen: https://codepen.io/willjonty/pen/ExVpVza.

The blue boxes prefer to wrap and stay at their maximum percentage until the window becomes particularly small. The red boxes, however, will resize their max value with the percentage until they reach the 200px breakpoint. So far, this is all good.

I would expect the red boxes to wrap when the viewport reaches 640px, which is 200 * 3 (for the three columns), plus 2 * 20px gaps. Notice however that when the viewport becomes smaller, the red boxes do not wrap at all, and instead overflow into a hidden part of the window. For some reason, the third box will only wrap when the viewport is 399 or less.

Does anyone know why CSS grid behaves like this? And how I might implement a column max-width of 30% that will wrap without any overflow?

I would use fr units, but those will hijack auto-fit to increase the number of columns in a row depending on the data. I want 3 equally-sized columns.

Thank you in advance.

Please add the code to the question itself, [per the guidelines](http://stackoverflow.com/help/how-to-ask). Thank you. — Michael Benjamin, May 12 '20 at 21:53
related: https://stackoverflow.com/a/55290215/8620333 you will probably find your answer there — Temani Afif, May 12 '20 at 22:32

score 1 · Answer 1 · answered Oct 29 '20 at 13:49

Not sure if you're still looking for an answer, but when you use percentages it accounts for the available space but it doesn't take into account the grid gap which will cause an overflow. A quick solve for this would be to add a calc function that does the percentages and subtract your grid gap. For example...

grid-template-columns: repeat(2, calc(50% - 10px));
grid-gap: 20px

score 0 · Accepted Answer · answered May 13 '20 at 00:38

Setting the max-width to a percentage negates the auto-fit declaration in a sense. While fr deals with free space, percentages are an actual width in the browser's eyes. So when you set the max to 30%, the browser will honor that without wrapping, because it can always split whatever width it has into chunks of 30%. This of course, is down to your 200px minimum that you set.

Since you don't want to use fr in your desktop rendering, I would recommend inserting a media query at the breakpoint which your content begins to not work, and reduce to one column that takes up all the free space. Example:

@media only screen and (max-width: 640px) {
.wrapper-percent {
grid-template-columns: 1fr;
}
}

Percentages in minmax CSS grid causing overflow

2 Answers2