--- name: grid url: /grid title: Grid ---
The new grid is a complex beast, with a lot of different options, especially when it comes to creating responsive layouts. Check out our template apps to see the grid in action, and get some ideas of how you can build your own responsive apps!
View TemplatesFor most apps, you'll want to contain all of your UI elements in the space of the window, and then make certain sections of the app scrollable. To achieve this, wrap your entire app in a grid frame:
The app frame always takes up 100% of the width and 100% of the height of the user's browser window.
Blocks are the... building blocks of apps in Foundation for Apps. They're flexbox-powered elements that can be intelligently sized, re-oriented, and re-ordered. Blocks are most analagous to rows in Foundation 5, but there's much more to them than that.
You're probably used to pairing grid classes with sizing classes, like `.small-12`, `.medium-6`, and so on. In Foundation for Apps, when grid blocks don't have sizing classes, they take up an even amount of space.
While these blocks expand to fill available space, it's also possible to have a block shrink, which means it only takes up as much space as its content needs. This is useful for title bars, tabs, or any other content that's secondary to the main content area.
It's also possible to size the grid using column-based sizing classes. By default, the Foundation for Apps grid uses a 12-column grid, but you can change this by modifying the `$total-columns` variable in your settings file.
Lastly, the sizing of blocks can be set on the parent, rather than individual children. Add the class `[size]-up-[n]` to a parent block to automatically size all children to be the same width. `[size]` is a breakpoint, like `small` or `medium`, and `n` is the number of items to fit on each row. By default, `n` only goes up to six, but this can be changed by modifying the `$block-grid-max-size` variable in your settings file.
Note that this sizing method only works with horizontal grids.
If basic blocks are the rows of a Foundation for Apps layout, then content blocks are the columns. They can be sized and re-ordered just like normal blocks, but they're meant to house actual content, not just more blocks.
In the above example, you can see that `grid-content` elements are the bottommost elements of the basic layout. Use `grid-block` when you intend to keep nesting more blocks for your layout, and use `grid-content` when you're filling the element with "normal" content, like lists, text, tabs, or menus.
By default, blocks in a grid are layed out horizontally. A grid can be reoriented to be vertical by adding the `vertical` class to a parent element.
This behavior doesn't cascade down to child blocks—they'll be horizontal by default also.
You can also reorient the grid at different screen sizes by using adding breakpoint names to the classes.
There are many ways you can customize the grid, using either our grid classes or the grid mixins, which allow you to write cleaner, more semantic HTML.
By default, every block in a grid will try to fit on the same line—this is how Flexbox works. However, you can also force grid items to wrap when they take up too much space by adding the class `wrap` to the parent block. In the below example, the four child blocks will display on two rows, two per row:
By default, all content blocks scroll vertically. This allows you to create independently-scrolling panes of content in your apps. However, in CSS, if an element scrolls vertically, any horizontal overflow will be hidden. To disable scrolling on a block, just add the class `.noscroll`.
By default, all grids stretch the full width and height available. However, it's possible to wrap a grid's content in a container with a maximum width.
The container aligns to the center of the block it's inside by default, but this can be changed by adding the class `contain-left` or `contain-right` to the container.
By default, all blocks in a grid align to the left of a grid, or the top if the grid is vertical. We can leverage the Flexbox `justify-content` property to easily re-align the blocks in a grid.
In this example, our blocks only take up eight columns of space, leaving four columns worth of empty space. By adding the `align-right` class to the parent block, the empty space will appear on the left instead of the right.
Grids can be aligned in five ways:
Blocks can be reordered to be different from the order they appear in the HTML. This is known as source ordering.
In the above example, the first child block will actually appear after the second one, because it has a lower order number. Blocks with the lower order (e.g. 1 is lower than 2) number appear first in the layout. If multiple blocks share an order, they're then grouped by their order in the HTML.
The ordering classes also come in responsive flavors, allowing you to reorder grid blocks at different screen sizes. In the below example, the two blocks will switch places on medium screens and larger.
The same offset classes from Foundation for Sites can be used in Foundation for Apps. To create a left-hand margin on a block, add the class `[size]-offset-[n]`, where `[size]` is a breakpoint name, and `[n]` is the number of columns to offset by. In the below example, the second column will be offset by 3, which is equal to 25% of the width of the entire container.
Offset classes allow you to fine-tune the spacing of blocks at different screen sizes. However, many common spacing options can also be achieved with the grid alignment classes described above.
The grid has many features, and to create a robust responsive design you'll need to use many of them, often times on the same element. That can lead to HTML like this:
Using the grid mixins, we can create the same grid element with one class:
Then our HTML looks like this (note that the `zf-panel` attribute is still required; this is what makes the panel function.):
The grid frame has its own mixin.
When creating a block, you can define all of its properties in one mixin, or use individual feature mixins instead.
When changing your layout at other breakpoints, we recommend using the feature mixins instead of using the base `grid-block` mixin again. This will prevent extraneous code from being output in your CSS.
Creating a content block (`grid-content` when using our classes), is similar to creating a standard grid block, and you have access to a few of the same options.
To create Foundation 5-style block grids, add the grid-layout
mixin to your parent block, and set how many child blocks you want to appear on each row.
Don't forget the container! It has its own mixin as well. You can define a maximum width and a position.
Adjust core grid settings using the grid variables in your settings file.
The $total-columns
variable not only affects the math of column widths, but it also affects how many CSS classes are output. For example, increasing the number of columns to 16 will add new CSS classes like small-13
, medium-14
, and so on.
Similarly, the $block-grid-max-size
variable determines the highest block grid class that will be output to CSS. This means by default, the classes will range from up-1
to up-6
. However, the mixin is not affected by this variable, so even if $block-grid-max-size
is set to 6, you can still use @include grid-layout(7);
just fine.