> For the complete documentation index, see [llms.txt](https://flexbox.gitbook.io/foundation-101/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://flexbox.gitbook.io/foundation-101/design/flexbox-based-grid-system.md).

# 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`

```css
// @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`

```css
$global-flexbox: true;
```

🚨 Now [refferal to the Flex Grid documentation](http://foundation.zurb.com/sites/docs/flex-grid.html) for building your layout.

*Challenge:*

* [ ] Activate the flexbox grid

## [Block grid](http://foundation.zurb.com/sites/docs/flex-grid.html#block-grids)

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.

```markup
<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!![](/files/-M3ujewCUutImEfjhxah)For this we need some datas in json file `<PROJECT_NAME>/src/data/games.json`

```javascript
[
  {
    "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"
  }
]
```

```markup
<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](http://foundation.zurb.com/sites/docs/flex-grid.html#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`

```markup
<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>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://flexbox.gitbook.io/foundation-101/design/flexbox-based-grid-system.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.