Foundation

Mobile Grid

On small mobile devices like iPhones or Android, the grid collapses to stack all columns on top of each other. Here's an example: try viewing this on a desktop and phone, or simply resize your browser window.

Mobile Navigation

There are several mobile-specific styles available to manage navigation. By using Foundation's tab structure you can not only create a tabbed interface, you can restyle those tabs into mobile nav blocks by simply adding a class of 'mobile'.

← Back to Mobility

.row
.six.columns
.six.columns
.seven.columns
.five.columns
.ten.columns
.two

Block Grid

Foundation also includes block grids, literal two-up, three-up, four-up and five-up grids that persist on any kind of device. These are ideal for grids of images, icons, or anything that has similar sizes.

Stay on top of what's happening in responsive design with Responsive from ZURB.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »