Creating a Foundation-style Block Grid in Bootstrap 3?

Question

In Zurb Foundation 3+, they have a CSS construct of a \"block grid\" which is an unordered list where you can specify the number of items in a row.

Here\'s their docs on

Answer 1

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;
}