Menu icon Foundation

My Posts

  • 3
    Replies
  • grid-x 100% height

    By Erik Oberhausen

    xy gridheight

    Hello. What is the best method to make either a grid-x wrapper or the surrounding grid-container stretch to 100% height? I initially setup an outer grid frame wrapper that enclosed my grid-x elements, but then ran into the overflow of the content within... (continued)

    Last Reply by Jonny Wood over 1 year ago


My Comments

Erik Oberhausen commented on Erik Oberhausen's post about 2 years

Thank Gregor.
This is old now, but finally figured out to use the flexbox helper classes they provide:
http://foundation.zurb.com/sites/docs/flexbox-utilities.html
 
<div class="grid-x grid-padding-x">
<div class="cell small-3 align-self-bottom"><div class="demo">Align bottom</div></div>
<div class="cell small-3 align-self-middle"><div class="demo">Align middle</div></div>
<div class="cell small-3 align-self-stretch"><div class="demo">Align stretch</div></div>
<div class="cell small-3 align-self-top"><div class="demo">Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?</div></div>
</div>
 
 

Erik Oberhausen commented on Gregor Agnes's post about 2 years

I am seeing slow compilation of js also. The sass is getting complied quickly for me.

Posts Followed


Following

    No Content

Followers

My Posts


My Comments

You commented on Erik Oberhausen's post about 2 years

Thank Gregor.
This is old now, but finally figured out to use the flexbox helper classes they provide:
http://foundation.zurb.com/sites/docs/flexbox-utilities.html
 
<div class="grid-x grid-padding-x">
<div class="cell small-3 align-self-bottom"><div class="demo">Align bottom</div></div>
<div class="cell small-3 align-self-middle"><div class="demo">Align middle</div></div>
<div class="cell small-3 align-self-stretch"><div class="demo">Align stretch</div></div>
<div class="cell small-3 align-self-top"><div class="demo">Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?</div></div>
</div>
 
 

You commented on Gregor Agnes's post about 2 years

I am seeing slow compilation of js also. The sass is getting complied quickly for me.

Posts Followed

Following

  • No Content

Followers

  • No Content