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:
Add The Legend of Zelda games on your index.html
Change The game list for another one like http://lists.design/list/videogames​
​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>
Mobile first
Front-end
Last updated 6 months ago
Flex Grid

Getting Started

​Block grid​

Real life example

​Source Ordering​

Block grid

Source Ordering
