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.