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:
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:
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>
Last updated
Was this helpful?