Menu icon Foundation
Is there a way to use some of the classes from flex-grid with the normal grid?

I want to have some of my rows and columns flex-box style, specifically so I can vertically align elements within columns.

I could write the css myself, but seeing as it's already included in `@include foundation-flex-grid` (eg: .align-middle, .align-self-bottom) is there a way I can just grab those classes?

Is this what 'Vanilla Flexbox Helper Classes' are for?

flexFlex Boxgridscsscss

I want to have some of my rows and columns flex-box style, specifically so I can vertically align elements within columns.

I could write the css myself, but seeing as it's already included in `@include foundation-flex-grid` (eg: .align-middle, .align-self-bottom) is there a way I can just grab those classes?

Is this what 'Vanilla Flexbox Helper Classes' are for?

Keith Burgie 10 months ago

If you're using the Sass version you can create a custom/semantic class for this case. Don't uncomment the flex-grid include from settings or it will affect your other rows.

http://foundation.zurb.com/sites/docs/flex-grid.html

.flex-row {
  @include flex-grid-row();

  > .column {
    @include flex-grid-column();
  }
}

You can also use display: table; for vertical alignment.

.table-row {
  display: table;

  > .column {
    display: table-cell;
    vertical-align: middle;
  }
}