Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will discuss the Flex Grid Block Classes in Foundation CSS.

In Foundation CSS, Flex Grid Block is used to specify the column width at the row level and instead of at individual level.

Foundation CSS Flex Grid Block classes:

• [size]-up-[n]: This class is used to specify the number(n) of columns visible per grid according to the screen size. Here size can be small, medium or large and n can be 1,2,3,4,5,6,7,8.

Syntax:

<div class="row [size]-up=[n]">
    ...........
</div>

Example 1: Below is the example that illustrates the use of Flex Grid Block using small-up-3, medium-up-2 and large-up-1 classes.

Output:

Foundation CSS Flex Grid Block

Example 2: Below is the example that illustrates the use of Flex Grid Block using small-up-1 medium-up-2 and large-up-3 classes.

Output:

Foundation CSS Flex Grid Block

Reference: https://get.foundation/sites/docs/flex-grid.html#block-grids