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.

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

<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.

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:

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.

<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