One Foundation 6.4 XY Grid Feature Not To Miss

The recent arrival of Foundation 6.4 and its XY Grid features look very promising.

While using any framework in the projects, I expect that the framework will “help” me to write less code, that it will be “smart”, fast and organic in responsive screens.

As far as I have played around with Foundation and its XY Grid, I could spot at a glance, that it is really “smarter” and more organic than its previous versions.

I especially liked the cell margins & padding feature. And I will explain why.


Block-grid Problems

While using previous versions of Foundation in the projects at my work we would use quite a lot “block-grid” feature. It would help a lot laying down some dynamic content, like news, as 3 or 4 columns in a row that would break into less columns on the smaller screens.

It would fulfil our needs but still there were some limitations.

For example, if one of the columns would have more content than the other, we would need to define the height in order to have same equal height columns. And it was a bit of headache adapting everything for a smaller screens — the content would occupy more height and we would need to change the height in different breakpoints.

Another problem would occur while adding background colour to the child items of the “block-grid” container. The background colour would eliminate the gutters between the elements because the spaces between them would be defined with paddings.

XY Grid Solution

With Foundation 6.4 advanced grid and “cell-block” classes you can forget these problems! And here is the small example how it works:

Responsive block-grid display of columns with Foundation 6.4 XY Grid

Have you noticed that the are now margins, or paddings, or heights defined in css in the “cell-block” child containers? Foundation XY Grid classes do their magic and if you resize the example’s window you will see how organic it is.

Another example that I would like to show is the same layout, using the same XY Grid but with css preprocessor (scss). This option is for the situations when front-end developers do not have control over the semantics of dynamic widgets:

Responsive block-grid display of columns with Foundation 6.4 XY Grid and Sass

And What About Bootstrap 4?

Summarising all this, I can’t to avoid mentioning that my described Foundation 6.4 feature is what Bootstrap 4, unfortunately, at this moment lacks. In general, you can achieve the same goal in Bootstrap 4 but with more clumsy and longer code, to my mind.

While playing around with Bootstrap 4, first of all, I wanted to use “card-decks” feature. However, I got disappointed very quickly when I saw that there is now control over the amount of cards I would like to show in a row on different screen sizes.

So I ended up creating an example using the grid markup and wrap cards. However, I needed to add some additional css to achieve the look I created with Foundation 6.4.

Just using Bootstrap’s wrap cards and the grid it didn’t “equalise” the height of the cards. In order to achieve that all columns would have the same height, I needed to add:

display:table;
table-layout:fixed;
height:100%;

to the .card container and also a bottom margin to the parent container of the .card in order to keep a bottom spacing between the columns:

Bootstrap 4 responsive card grid usage