Flex Grid

Getting Started

Learn how to quickly build complex responsive layouts using the Foundation Flex Grid.

foundation-flex-grid file

First you need to include foundation-flex-grid in your project <PROJECT_NAME>/src/assets/scss/app.scss

// @include foundation-grid;
@include foundation-flex-grid;
…
// @include foundation-float-classes;
@include foundation-flex-classes;

flexbox variable

Activate the flexbox grid system on your settings <PROJECT_NAME>/src/assets/scss/_settings.scss

$global-flexbox: true;

🚨 Now refferal to the Flex Grid documentation for building your layout.

Challenge:

  • Activate the flexbox grid

​Block grid​

Create evenly spaced blocks and get elements to line up easily. You can define column widths at the row-level, instead of the individual column level.

<div class="row small-up-1 medium-up-2 large-up-3">
<div class="column">1 per row on small</div>
<div class="column">2 per row on medium</div>
<div class="column">3 per row on large</div>
</div>

Real life example

Let’s build our first video games list!For this we need some datas in json file <PROJECT_NAME>/src/data/games.json

[
{
"name": "The Legend of Zelda",
"support": "Nes"
},
{
"name": "The Legend of Zelda: A Link to the Past",
"support": "Super Nes"
},
{
"name": "The Legend of Zelda: Ocarina of Time",
"support": "Nintendo 64"
},
{
"name": "The Legend of Zelda: Majora's Mask",
"support": "Nintendo 64"
},
{
"name": "The Legend of Zelda: The Wind Waker",
"support": "Nintendo GameCube"
},
{
"name": "The Legend of Zelda: Twilight Princess",
"support": "Nintendo GameCube"
},
{
"name": "The Legend of Zelda: Skyward Sword",
"support": "Wii"
},
{
"name": "The Legend of Zelda: Breath of the Wild",
"support": "Nintendo Switch"
}
]
<div class="row small-up-1 medium-up-2 large-up-3">
{{#each games}}
<div class="columns">
<div class="callout">
<span class="label">{{this.support}}</span>
<p>
<strong>{{this.name}}</strong>
</p>
</div>
</div>
{{/each}}
</div>

Challenge:

​Source Ordering​

Shift columns around between our breakpoints to dictate how responsive layouts are viewed. For this you can use the CSS classes small-order-x and medium-order-x

<div class="row">
<div class="column small-order-2 medium-order-1">
This column will come second on small, and first on medium and larger.
</div>
<div class="column small-order-1 medium-order-2">
This column will come first on small, and second on medium and larger.
</div>
</div>