Proximity - Grid System

Overview

White space is an important feature of the grid system — which automatically generates by default. You can overwrite some white space with additional CSS in order to increase or decrease the default settings.

Within a grid system, you can only change the white space above and below a grid cell. You can never change the gutters (white space to the left and right of a grid cell). This is because the grid system design fits perfectly in the content area, and is tied to the user's browser setting. There is no room for extra pixels. Reducing pixels causes the cells to behave in unexpected ways due to their float: left property.

Padding

By default, grid cells do not contain any padding. As a result, all content placed within grid cells must be placed within a list, paragraph, heading, form, image, table or other content element.

No paragraph tag, which leaves the grid cell without padding.
View code
<div class="span-4 background-light">
	With paragraph tag - text is easier to read with padding.
</div>

With paragraph tag - text is easier to read with padding.

View code
<div class="span-4 background-light">
	<p>With paragraph tag - text is easier to read with padding.</p>
</div>

Line height

The CSS provides several line height options that you can use to override the default size. The sizes range from 1.0 to 2.0.

Line height options
Class Details Example
line-height-xsmall Extra small font (0.8)
  • Resulting height
  • Resulting height
line-height-small Small font (1.0)
  • Resulting height
  • Resulting height
line-height-medium Medium (1.25) = default size
  • Resulting height
  • Resulting height
line-height-large Large (1.5)
  • Resulting height
  • Resulting height
line-height-xlarge Extra large (2.0)
  • Resulting height
  • Resulting height

Margins and gutters

The white space to the left and right of a grid cell is called the gutter. The white space above and below a grid cell is the margin. The default margin settings of a grid cell are as follows:

  • the margin-top is set to zero
  • the margin-right and margin-left is 20px.
  • the margin-bottom is set to 20px

You can only increase or decrease vertical proximity of content (move up or down). There are a variety of reasons to modify vertical proximity, such as visually connecting related components. In which case, you may need to increase or decrease white space between menu items, or move content closer to or farther from a heading tag. The classes you can use are as follows:

Table 1: Top Margin
Class Margin Example
margin-top-none 0px

Lorem ipsum dolar sit amet.

margin-top-small 2px

Lorem ipsum dolar sit amet.

margin-top-medium 10px

Lorem ipsum dolar sit amet.

margin-top-large 20px

Lorem ipsum dolar sit amet.

margin-top-xlarge 50px

Lorem ipsum dolar sit amet.

Table 2: Right Margin
Class Margin Example
margin-right-none 0px

Lorem ipsum dolar sit amet.

margin-right-small 2px

Lorem ipsum dolar sit amet.

margin-right-medium 10px

Lorem ipsum dolar sit amet.

margin-right-large 20px

Lorem ipsum dolar sit amet.

margin-right-xlarge 50px

Lorem ipsum dolar sit amet.

Table 3: Bottom Margin
Class Margin Example
margin-bottom-none 0px

Lorem ipsum dolar sit amet.

margin-bottom-small 2px

Lorem ipsum dolar sit amet.

margin-bottom-medium 10px

Lorem ipsum dolar sit amet.

margin-bottom-large 20px

Lorem ipsum dolar sit amet.

margin-bottom-xlarge 50px

Lorem ipsum dolar sit amet.

Table 4: Indentation, Left Margin
Class Margin Example
indent-none, margin-left-none 0px

Lorem ipsum dolar sit amet.

indent-small, margin-left-small 2px

Lorem ipsum dolar sit amet.

indent-medium, margin-left-medium 10px

Lorem ipsum dolar sit amet.

indent-large, margin-left-large 20px

Lorem ipsum dolar sit amet.

indent-xlarge, margin-left-xlarge 50px

Lorem ipsum dolar sit amet.

Examples

Default Margins

Lorem ipsum dolar sit amet.

Lorem ipsum dolar sit amet.

Using margin-bottom-small

Lorem ipsum dolar sit amet.

Lorem ipsum dolar sit amet.

View source
<div class="span-2">
	<h3 class="background-dark">Heading</h3>
	<div class="span-2 background-light margin-bottom-small">
		<p class="indent-medium">Lorem ipsum dolar sit amet.</p>
	</div>
	<div class="span-2 background-light margin-bottom-small">
		<p class="indent-medium">Lorem ipsum dolar sit amet.</p>
	</div>
	<div class="span-2"><img src="http://www.placehold.it/430x200" alt=""></div>
</div>
	

Recap

Proximity: Padding, Margins and Gutters

  • White space is an important feature of the grid system.
  • A gutter is the white space to the left and right of a grid cell.
  • You can only change the white space above and below a grid cell — not the gutters.
  • Grid cells do not have inside padding. The padding is inherent to the paragraph, list or heading.