Menu icon Foundation
Foundation 6, five columns

Hi, now that Block Grids have been removed, I can't create a section with 5 evenly spaced out columns, which I would have done with 'class="large-block-grid-5" '. Is there another way to do this?
Thanks

grid

Hi, now that Block Grids have been removed, I can't create a section with 5 evenly spaced out columns, which I would have done with 'class="large-block-grid-5" '. Is there another way to do this?
Thanks

Ercan Murat KISACA almost 4 years ago

Block grid is not removed it is just integrated into default Grid.

http://foundation.zurb.com/sites/docs/grid.html#block-grids

ashley almost 4 years ago

Thanks, Ercan. I know, but the default grid is based on 12 columns, and 12 is not divisible by 5. I'm specifically looking to be able to have 5 columns,

Ercan Murat KISACA almost 4 years ago

Just use large-up-5 as below, you will see there is no difference between large-block-grid-5
HTML
<div class="row small-up-1 medium-up-2 large-up-5">
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
<div class="column">
<img src="//placehold.it/300x300" class="thumbnail" alt="">
</div>
</div>

Rafi Benkual almost 4 years ago

Great answer @Ercan Murat KISACA

Block Grid is still a thing in Foundation 6, just integrated into the main grid rather than a separate component. This makes the markup less specific and helps keep the blocks lined up perfectly.

The Sass way -
Also, to make a 5 column grid, the new grid mixin helps you make it happen. Make your own column count for a specific element or make a five column row without changing the column count for the whole project.

.sidebar {
  // this will make .sidebar take
  up 2 columns of a 5 column grid

  @include grid-column(2 of 5);
}
.main-content {
  // this will make .main-content take
  up 3 columns of a 5 column grid

  @include: grid-column(3 of 5);
}

ashley almost 4 years ago

Thanks Ercan!! This is perfect! =D

Aaron almost 4 years ago

Is there a way to do the 5 column grid for a specific area without changing the entire grid without vanilla css?

John Crumpton over 3 years ago

Thanks Ercan works a treat!