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
– Abhishek Pandey, Commented Aug 2, 2017 at 11:17
@AbhishekPandey: yes, the whole app is based on CSS Grid (I will clarify that in the question) — WoJ
– WoJ, Commented Aug 2, 2017 at 11:21

WDyar · Accepted Answer · 2019-08-01 16:27:33Z

77

+100

"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>

answered Aug 1, 2019 at 16:27

WDyar

8867 silver badges3 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

lboyel Over a year ago

this will cause that column to shrink to fit the content in it

Michael Benjamin Over a year ago

When this answer was posted, fit-content() had more limited browser support. Today, it still requires a prefix in Firefox. caniuse.com/#search=fit-content

laszlo-horvath Over a year ago

Adding overflow: hidden; to the direct children of the grid which are the columns themselves was the trick for me.

Vadim Ovchinnikov · Accepted Answer · 2020-04-30 07:28:25Z

30

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.

edited Apr 30, 2020 at 7:28

answered Aug 2, 2017 at 11:52

Vadim Ovchinnikov

14.1k7 gold badges68 silver badges95 bronze badges

1 Comment

WoJ Over a year ago

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)

Vadim Ovchinnikov · Accepted Answer · 2018-03-04 19:11:40Z

15

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>

edited Mar 4, 2018 at 19:11

Vadim Ovchinnikov

14.1k7 gold badges68 silver badges95 bronze badges

answered Aug 2, 2017 at 11:51

G-Cyrillus

107k14 gold badges116 silver badges135 bronze badges

Comments

Chukwuemeka Maduekwe · Accepted Answer · 2023-01-25 03:36:03Z

14

Use clamp()

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

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

answered Jan 25, 2023 at 3:36

Chukwuemeka Maduekwe

8,7627 gold badges61 silver badges76 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related