I'm currently working on a CSS Grid layout, and I've encountered an issue with the "auto" value for row height sizing.
Despite having small content that should allow them to shrink, the items are maintaining a minimum height of 1fr.
For better clarity on the problem, here's a code example outlining the issue: you can also view it at https://codepen.io/16kbit/pen/RJbMWM
section {
display: grid;
grid-template-areas: "one top" "one bottom";
align-items: start;
border: 1px solid hotpink;
}
article {
border: 1px solid green;
}
#one {
grid-area: one;
}
#top {
grid-area: top;
}
#bottom {
grid-area: bottom;
background: yellow;
}<section>
<article id=one>
<h1>One</h1>
<p>Lorem cool dolizzle sit amizzle, dope sizzle elizzle. Nullam shiznit velizzle, get down get down volutpizzle, suscipizzle quizzle, dizzle mammasay mammasa mamma oo sa, arcu. Pellentesque sheezy tortizzle. Sed erizzle. Fusce izzle dolor shiznit pimpin'
tempizzle tempor. Maurizzle pellentesque nibh shizzlin dizzle turpizzle. Vestibulum in tortor. Pellentesque cool rhoncus black. In hac fo shizzle my nizzle check out this dictumst. Black uhuh ... yih!. Mammasay mammasa mamma oo sa tellizzle sh...
</article>
<article id=top>
<h1>Top</h1>
<p>Just Two Words</p>
</article>
<article id=bottom>
<h1>Bottom</h1>
<p>Help Me! How can I get closer to my Top neighbour?</p>
</article>
</section>The desired outcome:
I aim to have the #bottom item positioned as close as possible to the #top item, while allowing them to adjust their size based on their content.
Current outcome:
The CSS Grid is preventing the item's height from being smaller than 1fr unit (50% of total height) - influenced by the #one item with extensive text.
To illustrate visually, I am aiming for the layout shown on the right side rather than the current left-side result: