These are examples of different ways to use the Foundation Grid. Foundation 3 uses border-box so that borders and padding do not effect the overall width.
The grid allows for nesting down as far as you'd like, though at a certain point it will get absurd. You can use this nesting to create quite complex layouts, as well as some other tricks like form layouts or visual elements.
Offsets allow you to create additional space between columns in a row. Like the rest of the grid, they're nestable.
Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element itself.
Using these source ordering classes, you can shift columns around on desktops and tablets. On phones, the grid will still be linearized into the order of the markup.
When you're creating your layout you can optionally attach classes that take your existing grid elements and attach them to a phone grid.
The syntax includes .pull-one-mobile, .pull-two-mobile, .pull-three-mobile, .push-one-mobile, .push-two-mobile, .push-three-mobile.
Block grids are ul with .two-up, .three-up, .four-up and .five-up styles. These are ideal for blocked-in content generated by an application, as they do not require rows or even numbers of elements to display correctly.