Create "block-grid" like Foundation?

[JohnnyTheTank]

Is it possible to create the block-grid feature (like foundation)

I created a custom version here (bootstrap-block-grid), but it would be better in the native framework

---

this plnkr shows the benefits: http://plnkr.co/edit/qkyOlC?p=info
with block-grid, you have no glitches when the "items" have different heights

[cvrebert]

Duplicate of #11920.

[cvrebert]

with block-grid, you have no glitches when the "items" have different heights

To be fair, the Bootstrap v4 Flexbox grid doesn't have such glitches either.
Example: http://plnkr.co/edit/BIqApl?p=preview

[JohnnyTheTank]

okay thats right.

but the block-grid syntax is simpler to configure/change.

[JohnnyTheTank]

and with block grid, you can divide a row in 5 or 7 cells

[cvrebert]

and with block grid, you can divide a row in 5 or 7 cells

That can be done with the regular grid; it's just a matter of tweaking the "number of grid columns" variable.

---

but the block-grid syntax is simpler to configure/change.

Well, the final markup certainly has less repetition, but there's not much difference on the templating end:

<div class="block-grid-xs-1 block-grid-sm-2 block-grid-md-3 block-grid-lg-4">
{% for item in list %}
  <div>{{ item }}</div>
{% endfor %}
</div>

vs.

<div class="row">
{% for item in list %}
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">{{ item }}</div>
{% endfor %}
</div>

---

However, one can solidly argue that block-grid expresses the intention (N items per row at viewport size X) more clearly than the regular-grid equivalent.
Playing Devil's Advocate, some trade-offs are that block-grid is not as flexible as the regular grid, it's another naming scheme to remember (the numbers refer to how many items per row, not the number of columns out of 12), and it doesn't add any fundamentally new abilities (as demonstrated, such layouts can be expressed using the regular grid, albeit arguably less elegantly).
But to be clear, I'm basically ambivalent on this, and CSS feature requests are mostly within @mdo's purview.

[Jakobud]

@cvrebert and @mdo

Using Bootstrap's regular grid to emulate Foundation's Block Grid is not possible in it's current form. Look no further than this:

Bootstrap version: http://jsbin.com/fawofe/edit?html,output
Foundation Block Grid: http://jsbin.com/jegekuf/3/edit?html,output

As you can see, the key difference is that the Block Grid uses CSS to automatically account for height differences between items on the same row. This is not possible with Bootstrap's normal grid. You may or may not be able to do the same with Flexbox (I'm not a Flexbox expert I'm not sure) but one thing is for sure, Foundation's Block Grid is superior to a Flexbox implementation in terms of browser support and implementation simplicity.

Regarding the amount of code used, Bootstrap's emulated example is absolutely more code than Foundations' Block Grid. The difference in the amount of code increases linearly as the number of elements increases because every single element has to have all the column size definitions. Just think about a gallery of 1000's of lazy-loaded images. Block grid specifies row sizes 1 place but Bootstrap would have to specify it 1000's of times...... But this is all kind of a moot point since it isn't an adequate replacement anyways.

With regards to another naming scheme to remember.... so what? If it's a powerful feature that requires it's own naming scheme then it's worth it in my opinion. I mean the syntax is so dead simple to understand. Do you seriously think it's worth holding back such an awesome feature for fear of people being confused by it? Is that really a valid argument against it?

Anyways, in my opinion, Foundation's Block Grid is one of (if not THE) key feature that makes it stand out from Bootstrap. The CSS sorcery behind it blew me away when I saw it a couple years ago. I'm still very very surprised that Bootstrap hasn't implemented it's own version after several years. I have always loved Bootstrap, but I remember working at a company a couple years ago where we choose Foundation 5 instead of Bootstrap for a big project simply because of the Block Grid feature.

Of course, anyone can put up a 3rd party mixin/gist for a Bootstrap v4 Block Grid. But having something like this be a key native feature of Bootstrap would be awesome.

Just my 2 cents :-)

[twbs-lmvtfy]

Hi @Jakobud!

You appear to have posted a live example (http://jsbin.com/jegekuf/3/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 1, column 1 thru column 126: Start tag seen without seeing a doctype first. Expected <!DOCTYPE html>.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

[twbs-lmvtfy]

Hi @Jakobud!

You appear to have posted a live example (http://jsbin.com/fawofe/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 1, column 1 thru column 52: Start tag seen without seeing a doctype first. Expected <!DOCTYPE html>.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

[JohnnyTheTank]

@Jakobud +1

[cvrebert]

As you can see, the key difference is that the Block Grid uses CSS to automatically account for height differences between items on the same row. This is not possible with Bootstrap's normal grid. You may or may not be able to do the same with Flexbox

@Jakobud As mentioned in #18407 (comment) , you can most certainly do the same with Bootstrap's Flexbox grid.

[mdo]

Punting on this for the flexbox variation.