Create multi-device layouts with Zurb Foundation 3 Grid

Last update on August 19 2022 21:51:22 (UTC/GMT +8 hours)

Introduction

In this tutorial you will see how to create multi-device layouts with Zurb Foundation 3 Grid. The Grid is 12 column. You may also nest Grids with this Grid system.

Like other Grid systems, this Grid also has rows and columns. The CSS behind this Grid designed so, that the columns can vary with respect to the resolution of the screen and size of the window.

Usage

<div class="row">
  <div class="X columns">
    Main content...
  </div>
  <div class="Y columns">
    Sidebar...
  </div>
</div>

Where X and Y denote the number of columns. Since this Grid system supports 12 column, they may be one, two, three, four, five, six, seven, eight, nine, ten, eleven and twelve. The sum of X and Y can be 12 but must not exceed 12. If the sum is less than 12, you may add class="end" at the last column.

Explanation

The Foundation 3 Grid uses box-sizing: border-box CSS property. This property does not add border and padding to the associated object. Rather, it border and padding becomes part of the object, making the creation of layout much easier.

As you now, gutters add spacing between the columns of a Grid. Here, gutters are created by simply adding padding to the columns. You may modify gutters by SCSS variables, the download customizer, or in the CSS itself.

Unless it gets practically absurd, you may nest up to any number of levels down with this Grid system. This is a very powerful feature particularly when you are creating a complex layout.

Example of two column grid

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Example of two column Grid</title>
<link rel="stylesheet" href="/zurb-foundation3/foundation3/stylesheets/foundation.css">
<meta name="description" content="Example of two column grid with Zurb Foundation 3." />
</head>
<body>
<div class="row">
  <div class="eight columns">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
   <div class="four columns">
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>
</body>

View Demo

Example of Offsets

If you want to add additional space between columns in a row, you can use Offset. Offsets starts with one and go up to eleven. Offsets can also be nested.

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Example of grid offsets with Zurb Foundation 3</title>
<link rel="stylesheet" href="/zurb-foundation3/foundation3/stylesheets/foundation.css">
<meta name="description" content="Example of grid offsets with Zurb Foundation 3." />
</head>
<body>
<div class="row">
<div class="six columns offset-by-six">
.six.columns.offset-by-six
</div>
</div>
</body>

View Demo

Example of Centered Columns

When used, this makes the column itself centered, not the content within the column. Even if you change the number of columns, the effect makes sense.

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Example of centered columns with Zurb Foundation 3</title>
<link rel="stylesheet" href="/zurb-foundation3/foundation3/stylesheets/foundation.css">
<meta name="description" content="Example of centered columns with Zurb Foundation 3." />
</head>
<body>
<div class="row">
<div class="six columns centered">
.six.columns.centered
</div>
</div>
</body>

View Demo

Example of Source Ordering

If you wan to set the order of the markup to be rendered in a different way than it is written, you can use Zurb Foundation 3 source ordering classes. This works well with Desktop and Tablets. For phones though, this is not feasible.

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Example of source ordering with Zurb Foundation 3</title>
<link rel="stylesheet" href="/zurb-foundation3/foundation3/stylesheets/foundation.css">
<meta name="description" content="Example of source ordering with Zurb Foundation 3." />
</head>
<body>
<div class="row">
<div class="six columns push-six">
.six.columns
</div>
<div class="six columns pull-six">
.six.columns (last)
</div>
</div>
</body>

View Demo

Note: push and pull are supported from two to ten.

Example of Mobile Grid

The Zurb Foundation 3 Grid has two modes for working with small displays like mobiles. The first one does not require any additional styles to be added. This is suitable if you want your Grid created for the desktop to be rendered in Mobile also. The another option is "Four Column Mobile Grid", which needs some additional CSS classes to be added.

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Example of mobile grid with Zurb Foundation 3</title>
<link rel="stylesheet" href="/zurb-foundation3/foundation3/stylesheets/foundation.css">
<meta name="description" content="Example of mobile grid with Zurb Foundation 3." />
</head>
<body>
<div class="row display">
  <div class="eight mobile-one columns">
    .eight.mobile-one.columns
  </div>
  <div class="four mobile-three columns">
    .four.mobile-three.columns
  </div>
</div>
</body>

View Demo

Note: You can go for source ordering for Mobile Grid too. You may add .pull-one-mobile, .pull-two-mobile, .pull-three-mobile as well as .push-one-mobile, .push-two-mobile, .push-three-mobile. classes for source ordering.

Example of Block Grids

For blocked-in content generated by an application, where you do not want rows or even the number of elements to be displayed correctly. Block grids are ul with two-up, three-up, four-up and five-up styles.

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Example of block grid with Zurb Foundation 3</title>
<link rel="stylesheet" href="/zurb-foundation3/foundation3/stylesheets/foundation.css">
<meta name="description" content="Example of block grid with Zurb Foundation 3." />
</head>
<body>
<h3>Two up block grid</h3>
<ul class="block-grid two-up">
  					<li>Two-up element</li>
  					<li>Two-up element</li>
  					<li>Two-up element</li>
  					<li>Two-up element</li>
  					<li>Two-up element</li>
</ul>
<h3>Three up block grid</h3>
<ul class="block-grid two-up">
  					<li>Two-up element</li>
  					<li>Two-up element</li>
  					<li>Two-up element</li>
  					<li>Two-up element</li>
  					<li>Two-up element</li>
</ul>
<h3>Four up block grid (Mobile)</h3>
<ul class="block-grid three-up">
  					<li>Three-up element</li>
  					<li>Three-up element</li>
  					<li>Three-up element</li>
  					<li>Three-up element</li>
  					<li>Three-up element</li>
</ul>
<h3>Five up block grid</h3>
<ul class="block-grid mobile four-up">
  					<li>Four-up element</li>
  					<li>Four-up element</li>
  					<li>Four-up element</li>
  					<li>Four-up element</li>
  					<li>Four-up element</li>
  					<li>Four-up element</li>
</ul>
<ul class="block-grid five-up">
  					<li>Five-up element</li>
  					<li>Five-up element</li>
  					<li>Five-up element</li>
  					<li>Five-up element</li>
  					<li>Five-up element</li>
  					<li>Five-up element</li>
  					<li>Five-up element</li>
</ul>
</body>

View Demo

So, now you know how to create a multi-device layout using Zurb Foundation 3 Grid for your next project. Twitter Bootstrap also has a Grid system. Are you familiar with that? Then try both and let us know which one is suitable for what kind of project.

Previous: Introduction to Zurb Foundation 3
Next: Zurb Foundation 3 Typography