CODEWITHSUNDEEP
htmlcssflexboxzurb-foundation
Petter
Petter

Reputation: 55

How to evenly distribute cell height in Foundation XY-grid (flexbox)

Using Foundation XY-grid, and specifically a nested grid-y inside a cell, I want to use the class .auto on the parent cell to distribute the cell heights evenly, in the case of a grid-y with 2 cells that would be 50%/50%.

This works fine as long as the grid-y cell content is low enough to fit inside the cell without pushing the border. However, if the content is higher, the content is cropped.

A workaround for this is to set flex-basis for class .auto to "auto" instead of "0px" which is the predefined value in Foundation css.

This works fine as long as the content is high enough to push the cell border, but if it's smaller then the parent cell heights are not distributed evenly.

Side note: The use of ".grid-y" on each cell is to be able to position the content of the cell center vertically. Please see: Vertically align content inside XY-Grid Cell

<div class="grid-container">
<div class="grid-x">
    <div class="cell medium-6 grid-y align-middle align-center" style="background:green;">
        <div style="background: blue; height: 300px">
            Element A
        </div>
        <div style="background: violet; height: 300px">
            Element B
        </div>
    </div>
    <div class="cell medium-6 grid-y align-middle align-center" style="background:red;">
        <!-- Nested Grid -->
        <div class="grid-y" style="min-height: 100%; width: 100%;">
                <div class="cell auto grid-y align-middle align-center" style="background:yellowgreen;">
                    <div style="background: yellow; height: 50px">
                        Element C
                    </div>
                    <div style="background: gray; height: 50px">
                        Element D
                    </div>
                </div>
                <div class="cell auto grid-y align-middle align-center" style="background:darkcyan;">
                    <div style="background: yellow; height: 70px">
                        Element E
                    </div>
                    <div style="background: gray; height: 70px">
                        Element F
                    </div>
                </div>
        </div>
    </div>
</div>
</div>

Modified CSS:

.grid-y > .cell.auto {
 -webkit-box-flex: 1;
 -webkit-flex: 1 1 auto;
 -ms-flex: 1 1 auto;
 flex: 1 1 auto;
}

instead of Foundation original code:

flex: 1 1 0px

Upvotes: 1

Views: 1979

Answers (1)

rafibomb
rafibomb

Reputation: 535

Because the grid is already using Flexbox, you can set up a horizontal grid and equal height cells by making the cells also display flex.

Example: https://codepen.io/rafibomb/pen/wLWKXL

<div class="grid-x">
   <div class="cell flex-container auto">
      <img src="http://placehold.it/20" alt="">
   </div>
      <div class="cell flex-container auto">
        <img src="http://placehold.it/50" alt="">
      </div>
     <div class="cell flex-container auto">
       <img src="http://placehold.it/700" alt="">
     </div>
  </div>

Upvotes: 0

Related Questions