Creating a Foundation-Style Block Grid in Bootstrap 3

Creating a Foundation-style Block Grid in Bootstrap 3?

I too wish this was feature in BS3. You'll have to create your own solution.

My typical workaround is just as Foundation does it, by using percentages to define width, the nth-child selector, and adjusting margins.

[class*="block-grid-"] {
    display: block;
    padding: 0;
    margin: 0 -0.55556rem;
}

[class*="block-grid-"] > li {
    display: block;
    height: auto;
    float: left;
    padding: 0 0.55556rem 1.11111rem;
}

.small-block-grid-3 > li {
    width: 33.33333%;
    list-style: none;
}

.small-block-grid-3 > li:nth-of-type(1n) {
    clear: none;
}

.small-block-grid-3 > li:nth-of-type(3n+1) {
    clear: both;
}

Center a grid-block in a Foundation 4 Grid

Add a display: inline-block to your ul element, then change the width of your li elements to width:98px;.

Here's a jsFiddle showing it in action.

How can you properly layout a bootstrap3 css grid using a mustache template?

Add all you col-md-4's in the same row. 3x col-md-4 makes 100% and the next one jump to next row. This could give you troubles when your col-md-4's differs in height, see also: How can I create multiple rows using semantic markup in Bootstrap 3? and Change overflow mode in small devices on Twitter Bootstrap 3.0

Foundation - Reorganize blocks according to Foundation breakpoints

Not really a Foundation oriented answer, but with display: grid; being widely supported, this solution should work with any CSS framework and will make the HTML much cleaner and the CSS much more flexible (by doing this, you also keep the styling out of the HTML document, which is a good practice and better for maintainability )

The idea is to re-create a grid of 12 columns using :

  display: grid;
  grid-template-columns: repeat(12, 1fr);

And then span our panels on the corresponding number of columns using :

  grid-column: span {{ number of column }};

Which gives us this :

html, body {  margin: 0;  padding: 0;}
.grid {  display: grid;  grid-template-columns: repeat(12, 1fr); /* 1fr = 1 column */  grid-gap: 20px; /* gutter beetween each column and row */  margin: 20px;}.panel {  height: 180px;  line-height: 180px;  text-align: center;  font-size: 50px;  font-family: Impact, sans-serif;  color: #fff;}
/* large screen */.panel:nth-child(1) {  grid-column: span 3; /* 3 columns */  background-color: #e64433;}.panel:nth-child(2) {  grid-column: span 5; /* 5 columns */  background-color: #09afb9;}.panel:nth-child(3) {  grid-column: span 4;  /* 4 columns */  background-color: #ed9a24;}
/* medium screen */@media (max-width: 1000px) {  .panel:nth-child(1) {    order: 1;    grid-column: span 4;  }  .panel:nth-child(2) {    order: 3;    grid-column: span 12;  }  .panel:nth-child(3) {    order: 2;    grid-column: span 8;  }}
/* small screen */@media (max-width: 600px) {  .panel:nth-child(1) {    order: 1;    grid-column: span 12;  }  .panel:nth-child(2) {    order: 2;    grid-column: span 12;  }  .panel:nth-child(3) {    order: 3;    grid-column: span 12;  }}

<div class="grid">  <div class="panel">    1  </div>  <div class="panel">    2  </div>  <div class="panel">    3  </div></div>

How to use block-grid classes

You linked to the Foundation 5 block-grid docs but you are using Foundation 6. In Foundation 6, the block-grid was combined with the regular grid.

The block grid from Foundation 5 has been merged into the main grid. Add a class of the format [size]-up-[n] to change the size of all columns within the row. By default, the max number of columns you can use with block grid are 6.

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

Example:

<div class="row small-up-1 medium-up-2 large-up-4">
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="Sample Image">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="Sample Image">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="Sample Image">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="Sample Image">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="Sample Image">
  </div>
  <div class="column">
    <img src="//placehold.it/300x300" class="thumbnail" alt="Sample Image">
  </div>
</div>

Foundation 6 block-grid of non equal height elements

If you want to use Foundation's block grid, I advise using Masonry. Here's a guide on how to implement it with Foundation, but note this is Foundation 5 so your syntax for the block-grid classes will be slightly different.

Alternatively you can use CSS Columns to achieve a similar effect, utilising the column-gap property. Full example here.

.parent {
    column-gap: 30px;
}

---

Related Topics