I can't find, in the documentation, what is the difference between auto and small-auto classes (as well as shrink and `small-shrink).
But there is an obvious difference as shown in the demo below (with grid-y). auto fit the whole height, but small-auto doesn't.
Any idea why there is a different behavior ?
body {
height: 100vh;
}
.outline {
outline: 1px solid red;
}
.block {
background: #DDD;
padding: 1em;
}
.fullheight {
height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" rel="stylesheet"/>
<div class="grid-x fullheight">
<div class="cell small-6">
<div class="grid-y fullheight">
<div class="cell shrink outline block">shrink</div>
<div class="cell auto outline block">auto</div>
</div>
</div>
<div class="cell small-6">
<div class="grid-y fullheight">
<div class="cell small-shrink outline block">small-shrink</div>
<div class="cell small-auto outline block">small-auto</div>
</div>
</div>
</div>