Menu
In this HTML structure which is placed inside the <body> element (demo here):
<div class="grid-1">
<header>
<a href="/">Home</a>
</header>
<main>
<article>
<h1>Test</h1>
<h2 id="overview">Overview</h2>
<p>Lorem ipsum.</p>
<div>
<div>
<pre><code>Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet
Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet
Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet, Lorem, Ipsum, Dolor, Sit, Amet
</code></pre>
</div>
</div>
<h2 id="conclusion">Conclusion</h2>
<p>Lorem ipsum.</p>
</article>
</main>
<footer>
<a href="/">Home</a>
</footer>
as you can see, the second child element (i.e. the <main> element) has a <pre> block with a few lengthy lines of code.
When this CSS stylesheet is applied to that HTML structure:
html,
body {
margin: 0;
padding: 0;
}
.grid-1 {
margin-bottom: 50px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
header {
background: hsl(209, 36%, 90%);
padding: 10px;
}
main {
background: hsl(209, 36%, 80%);
padding: 10px;
}
footer {
background: hsl(209, 36%, 70%);
padding: 10px;
}
pre {
border: 1px solid black;
padding: 10px;
overflow-x: auto;
}
The second column stretches to contain the entire lines of the <pre> block, making the overflow-x: auto; on the <pre> block to be effectively ignored, and pushes the third column out of the view and to the right:
However, if I change grid-template-columns: 1fr 1fr 1fr; to grid-template-columns: 1fr minmax(1px, 1fr) 1fr;, all three columns are assigned equal widths and the <pre> block's overflow-x: auto; comes into effect.
If I am not mistaken, in this scenario, minmax(1px, 1fr) should resolve to 1fr and make the second grid effectively identical to the first grid. Then why does it change the way the grid is rendered?
600
This behaviour can be explained by the default min-width of grid columns as well as how browsers interpret the minmax function.
min-width of grid columnsBy default, grid columns have a min-width of auto. As mentioned in Preventing a Grid Blowout, this will cause the column to be "indefinitely sized", which means its content can influence its width and expand it.
This behaviour can be overriden by setting the min-width of the column to something other than auto, such as 0px, 1px, or anything else that makes sense.
minmax(1px, 1fr) and minmax(auto, 1fr) is interpreted by browsersAccording to MDN's reference page for minmax:
A function taking two parameters, min and max.
Each parameter can be a
<length>, a<percentage>, a<flex>value, or one of the keyword valuesmax-content,min-content, orauto.If max < min, then max is ignored and
minmax(min,max)is treated as min. As a maximum, a<flex>value sets the flex factor of a grid track; it is invalid as a minimum.
However it doesn't explain if minmax, when applied to a grid column, changes the behaviour of width, or min-width and max-width properties?
It turns out minmax, at least in this case, is interpreted in a way similar to:
min-width: 1px;
max-width: 1fr;
Similarly, minmax(auto, 1fr) would be interpreted similar to:
min-width: auto;
max-width: 1fr;
But as explained earlier, depending on the content of the column, min-width: auto; would allow the browser to expand the width of the column even beyond 1fr -- a potential point of confusion.
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With