Layout Cheatsheet

An Refresher of Layout Implementations

Legend

Container
Item

Side by Side Layout Options

Inline-Block

display: inline-block;
width: 100px;
display: inline-block;
width: 100px;

Flexbox - default behavior

display: flex;

Flexbox - flex item behavior

display: flex;
flex: 1;
flex: 2;

Grid

display: grid;
grid-template-columns: 1fr 1fr;

Center Alignment Options

Text-Align

text-align: center;
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Flexbox (row) - justify-content (center)

display: flex;
justify-content: center;

Flexbox (column) - align-items (center)

display: flex;
flex-direction: column;
align-items: center;
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.

Centered Single Column Layout Options

Margin Auto

width: 1000px;
margin: 48px auto;

Grid with Gutters

display: grid;
grid-template-columns: 1fr 1000px 1fr;
grid-template-areas: ". content .";
grid-area: content;

Positioning Options

Apart

display: flex;
justify-content: space-between;

Custom Positioning (recommended only for large containers like heroes)

position: relative;
position: absolute;
left: 0px;
top: 25%;
position: absolute;
bottom: 0px;
right: 0px;