Home » Resources » Ratio Driven Design » Test

Grids

Alignment of content.

Grid types

The different ways of controlling layout within sections.

Gather

For one-dimentional alignment, Flexbox is used to disperse items based on their natural size, along rows, with equal spacing in between.

By default, items align to the top of the row.

  •  
  •  
  •  
  •  
  •  

Align

For one-dimentional alignment, Flexbox is used to disperse items equally, automatically filling rows.

  •  
  •  
  •  
  •  
  •  

Grid

For two-dimentional alignment, CSS Grid is used to position items with greater control.

  •  
  •  
  •  
  •  
  •  

Variations

Options for tweaking aligment.

Gather — vertically-centred

For one-dimentional alignment, Flexbox is used to disperse items based on their natural size, along rows, with equal spacing in between.

Here, items align to the vertical-centre of the row.

  •  
  •  
  •  
  •  
  •  

Gather — horizontally-centred

For one-dimentional alignment, Flexbox is used to disperse items based on their natural size, along rows, with equal spacing in between.

Here, items follow the horizontal alignment of the section.

  •  
  •  
  •  
  •  
  •  

Spacing control

Adjustments to the spacing between grid items.

Base spacing

Gaps based on our base font size.

  •  
  •  
  •  
  •  
  •  

Tight spacing

Gaps based on the next unit down our modular scale.

  •  
  •  
  •  
  •  
  •  

No spacing

No gaps.

  •  
  •  
  •  
  •  
  •