How to set the maximum width of a column in CSS Grid Layout?

Question

What I want to achieve:

Using CSS Grid Layout, to have a page with a right column which size is derived from its content, but only up to 20% of the window width.

How I thought it would work:

div {
  border-style: solid;
}

#container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr minmax(auto, 20%);
}

<div id="container">
  <div>
    some content
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin
  </div>
</div>

It looks good, but then when I remove the content of the second div, the left column does not collapse:

div {
  border-style: solid;
}

#container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr minmax(auto, 20%);
}

<div id="container">
  <div>
    some content
  </div>
  <div></div>
</div>

My question:

I was under the impression that since minmax()

(...) defines a size range greater than or equal to min and less than or equal to max.

it would mean that in my case the width is set from auto (= 0 when the div is empty) to 20%. It however stays at 20%. Why is it so?

*I would like to have a page with a right column* there are many other ways to achieve this, Is there any specific reason for using `grid-template-columns`? — Abhishek Pandey, Aug 02 '17 at 11:17
@AbhishekPandey: yes, the whole app is based on CSS Grid (I will clarify that in the question) — WoJ, Aug 02 '17 at 11:21

score 62 · Accepted Answer · answered Aug 01 '19 at 16:27

"The fit-content function accepts one param, the maximum value. A grid column/row with this property set will still take up as little space as necessary, according to its content, but no more than the maximum value."

See this article: Becoming a CSS Grid Ninja!

You can solve your case while still making use of percentage-based maximums:

div {
  outline: 1px dotted gray;
}

.container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr fit-content(20%);
}

.container div {
  overflow: hidden; /* this needs to be set so that width respects fit-content */
}

<div class="container">
  <div>
    some content
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin
  </div>
</div>

<div class="container">
  <div>
    some content
  </div>
  <div></div>
</div>

this will cause that column to shrink to fit the content in it — lboyel, Apr 16 '20 at 15:30
When this answer was posted, `fit-content()` had more limited browser support. Today, it still requires a prefix in Firefox. https://caniuse.com/#search=fit-content — Michael Benjamin, Apr 30 '20 at 17:49
Adding `overflow: hidden;` to the direct children of the grid which are the columns themselves was the trick for me. — laszlo-horvath, Sep 21 '22 at 08:38

Vadim Ovchinnikov · Answer 2 · 2020-04-30T07:28:25.977

You've misunderstood minmax function. It first tries to apply maximum value and when that's not possible, it applies minimum.

So to fix your layout, you just need to calculate 20% of your container width, apply it using max-width property for you grid item, and use auto in your grid-template-columns property definition for the second column. Demo:

div {
  outline: 1px dotted gray;
}

.container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr auto;
}

.container > :nth-child(2) {
  max-width: 60px; /* 20% x 300px */
}

<div class="container">
  <div>
    some content
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin
  </div>
</div>

<div class="container">
  <div>
    some content
  </div>
  <div></div>
</div>

Update: More flexible solution will be to use fit-content function from this answer.

Ah. I read *defines a size range greater than or equal to min and less than or equal to max* as a continuum from min to max. Your explanation is way more precise. Thank you. In that case `max-width` will indeed be the way to go (I was hoping to avoid two entries for the same dimension-setting action on the column) — WoJ, Aug 02 '17 at 14:06

score 14 · Answer 3 · edited Mar 04 '18 at 19:11

You might need to set the max-width on the container itself and let its column set to auto.

div,
aside {
  border-style: solid;
}

#container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr auto;
}

aside {
  max-width: 60px; /* 60px is 20% of 300px*/
  /* max-width:20%; 20% of window's */
  font-size: 0;
  transition: 0.25s;
}

#container:hover aside {
  font-size: 1em;
}

<div id="container">
  <div>
    Hover it to see aside grow till 20% average width
  </div>
  <aside>lets give a try to resize it from content</aside>
</div>

score 4 · Answer 4 · answered Jan 25 '23 at 03:36

4

Use clamp()

grid-template-columns: clamp(350px, 40%, 500px) auto;

Wheree clamp take three parameters (min, preferred, max)

answered Jan 25 '23 at 03:36

Chukwuemeka Maduekwe

6,687
5
44
67

How to set the maximum width of a column in CSS Grid Layout?

4 Answers4

Linked