In this code I have a grid that functions as a grid parent for the whole page and some nested containers that may also be grid parents/containers if needed. The problem starts when I want to automatically size columns with the repeat function using auto-fit/auto-fill for the repeat count and the minmax function for the track width.
The HTML:
<body>
<div class="wrapper card-grid">
<div class="card rounded-1">
...
</div>
<div class="card rounded-2">
...
</div>
<div class="card rounded-3">
...
</div>
</div>
</body>
And the CSS:
body{
min-height: 100vh;
display: grid;
justify-content: center;
align-content: start;
}
.wrapper{
padding: 96px 0 16px;
max-width: 960px;
}
.card-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
When both the body element and the grid-card element are grid parents the code simply stops working as intended. Columns' widths do not automatically adjust, instead staying fixed to the minimum value of the minmax function and overflowing the viewport when it gets too small.