I like the idea of using fr but I don't like that the fr stretches to fit what is inside it.
In my example I have 4 columns and in one is all 1fr and the other is percentage with a grid gap:
https://codepen.io/shellwe/pen/bXgOBE
Stack overflow is telling me that if I use a codepen it needs to be accompanied by code:
The HTML:
<div class="grid-fr">
<div>col1</div>
<div>Going to college is about taking control of your future—you get to decide.</div>
<div>
<div class="wide">
<span>fffffffffffffffffffffffffffffffff</span>
<br /><br />
<div style="width:100%; height:20px; background-color:red">100% width</div>
</div>
</div>
<div>col4</div>
</div>
<div class="grid-percent">
<div>col1</div>
<div>Going to college is about taking control of your future—you get to decide.</div>
<div class="wide">
<span>fffffffffffffffffffffffffffffffff</span>
<br /><br />
<div style="width:100%; height:20px; background-color:red">100% width</div>
</div>
<div style="z-index:1">col4</div>
</div>
The CSS
[class*="grid"] {
margin-inline: auto;
margin-top: 5rem;
display: grid;
width: 400px;
grid-gap: 1rem;
}
.grid-fr {
grid-template-columns: repeat(4, 1fr);
}
.grid-percent {
grid-template-columns: repeat(4, 25%);
}
[class*="grid"] > * {
background-color: lightgrey;
}
In the first one you will see that the series of f's makes is longer than the 25 percent so it stretches the column out thus stretches what is below it.
When I use percent it does make the width consistent but when I try to included grid-gap it expands outside the box.
In flexbox there is a flex-grow and flex-shrink which keep the columns the same width but I don't see anything like that for fr in flexbox.
This is what I am seeing in the latest version of Chrome:
https://i.stack.imgur.com/p1vfH.jpg
Thank you!
