What is the difference between auto and small-auto in ZURB Foundation xy grid?

13 Views Asked by At

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>

0

There are 0 best solutions below