Layout: Grids

Description

The grid module provides classes for building layouts based on a flexible 12-column grid, with automatic margins, and with additional classes to enable the layout to collapse properly on smaller devices.

Usage

A grid should be made up of a wrapper element with the class ipsGrid, and direct descendants with appropriate size classes applied (see below). For example:

<div class='ipsGrid'>
	<div class='ipsGrid_span3'>Span 3</div>
	<div class='ipsGrid_span3'>Span 3</div>
	<div class='ipsGrid_span4'>Span 4</div>
	<div class='ipsGrid_span2'>Span 2</div>
</div>

This would render as:

Grid classes ipsGrid_span1 through ipsGrid_span12 are available for the various column sizes.

Wrapping Grid Items

Elements in a grid will automatically neatly wrap to new rows, providing every item in the grid uses the same span width and height, without you needing to manually create new row structures. For example:

<div class='ipsGrid'>
	<div class='ipsGrid_span6'>Span 6</div>
	<div class='ipsGrid_span6'>Span 6</div>
	<div class='ipsGrid_span6'>Span 6</div>
	<div class='ipsGrid_span6'>Span 6</div>
</div>

For grids where your items may differ in height or width, consider the ips.ui.grid widget instead.

Responsiveness

To cause the grid layout to collapse on smaller devices, add either ipsGrid_collapseTablet or ipsGrid_collapsePhone to the class list on the wrapper element, like so:

<div class='ipsGrid ipsGrid_collapsePhone'>
	...
</div>