Set minimum and maximum widths to grid column using percentages

Question

When I set the first column in a CSS grid column to a minimum percentage, the column width does not observe the minimum. Example:

grid-template-columns: minmax(50%, 75%)  1fr;

With these values, as the viewport narrows the first column keeps shrinking horizontally until it finally collapses and disappears. Likewise, stretching the screen makes the first column wider as you go, so that eventually its wider than 3/4 of the total grid width.

(Even so, at most grid widths the proportions of the two columns do correspond, roughly, to what I'm trying to achieve.)

So is there a way to make a first column whose width is always, say, at least half of the grid width, and never more than 2/3?

Notes:

Grid-gap is 0 for now so as avoid complicating the percentage computations.
I know that I can set the minimum width to a fixed number of pixels and thereby enforce a minimum width -- the column won't disappear. But then as the grid narrows the maximum % constraint is violated. Besides, I'm trying not to use fixed pixel widths.

My code (grid-gap added to show column boundaries):

.wrapper {
  display: grid;
  grid-template-columns: minmax(50%, 75%) 1fr;
  grid-gap: 1px;
  padding: 10px;
  background-color: #219643;
}

.item {
background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

<div class="wrapper">
  <div class="item">Column 1</div>
  <div class="item">Column 2</div>
</div>

You have percentage widths, and fr units; there doesn't seem to be an initial known width from which a percentage can be calculated. Have you tried to assign a width to the grid element? — David Thomas, Dec 21 '20 at 21:24
@David etc. : yes, setting an explicit width on the container ("wrapper" here) to 100%, or 90% -- it percentages of the viewport -- has no effect that I can see. My understanding that the width from which the percentage is calculated is that of the parent, so that minmax(50%, 75%) should refer to the width of the "wrapper" div. If the width of the wrapper is set to a fixed pixel number then the columns don't resize at all as the viewport width changes. — Joan Eliot, Dec 21 '20 at 21:34
Does this work better for you? https://jsfiddle.net/dLke91zv/ — Michael Benjamin, Dec 21 '20 at 21:58
@MichaelBenjamin: Why yes it does! Please elaborate on the reason your version works and my doesn't, if you have time. — Joan Eliot, Dec 21 '20 at 23:31

score 1 · Accepted Answer · answered Dec 22 '20 at 00:10

1

Your original code looks fine. I believe it should work. Why it doesn't isn't entirely clear to me.

I'll say this: We're just at Grid Level 1. It's brand new tech, so you should expect some glitches and limitations.

For example, in your minmax(50%, 75%), the track will always default to the max value.

minmax() defaulting to max

This removes minmax() as a useful option in many layouts, as many people want a min default.

Why doesn't the minimum percentage work? I think it has something to do with the width of the parent container (no settings I tried worked), or something with the grid track sizing algorithm. Again, it's unclear.

So I just skipped over all that, giving the browser the same commands in a different way. This seems to work:

.wrapper {
  display: grid;
  grid-template-columns: minmax(50%, 1fr) 25%;
  grid-gap: 1px;
  padding: 10px;
  background-color: #219643;
}

.item {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

<div class="wrapper">
  <div class="item">Column 1</div>
  <div class="item">Column 2</div>
</div>

answered Dec 22 '20 at 00:10

Michael Benjamin

346,931
104
581
701

Your linked post is very helpful. But would the results of `grid-template-columns: 75% 25%` be any different than what we get with with your code? – Joan Eliot Dec 22 '20 at 00:19
Also relevant to your point about the trouble being a 'Level 1' first pass on the grid spec is that with something like: `grid-template-columns: minmax(50%, 1fr) 140px;` the minimum setting for the first column is ignored--the pixel count for the second column is always maintained at the expense of that "50%" minimum. – Joan Eliot Dec 22 '20 at 00:24
With regard to your first comment I would say "yes". Until the `min` 50% is respected by the browser, `gtc 75% 25%` seems equivalent. – Michael Benjamin Dec 22 '20 at 00:33
With regard to your second comment, agreed. That's the problem. – Michael Benjamin Dec 22 '20 at 00:34
Elaborating on my second comment: My point was that as with the Level 1 default preference for the maximum setting that you identify, the implementation of grid in Level 1 doesn't give you a choice as to which column's settings take precedence: if you set a fixed pixel width for one column, a "minimum" of 50% for the second column is ignored in favor of preserving the specified pixel count. – Joan Eliot Dec 22 '20 at 00:42

Set minimum and maximum widths to grid column using percentages

1 Answers1

Linked