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