Collection of reusable CSS layout pattern

centered

Centering a element vertically and horizontally by using flexbox.

gutter / row

Putting in order elements vertically at equal intervals.

gutter / column

Putting in order elements horizontally at equal intervals.

distributed

Distributed elements by even space with full width.

isolated / left end

Isolated element at the left end among sibiling elements.

isolated / right end

Isolated element at the right end among sibiling elements.

equal columns

Equal width columns with grid.

Sticky footer with flexbox. Footer is stick to bottom of viewport if the content of the page is shorter than window's height.

inline centered

Centering an inline element.

dummy

inline right side

Places an inline element to right side.

dummy

gutter / inline

Putting in order inline elements horizontally at equal intervals with wrapping text.

  • dummy
  • dummy
  • dummy
  • dummy
  • dummy
  • dummy
  • dummy
  • dummy
  • dummy

with left ghost

Places a non existing element on the left and arrange columns with same width.

dummy

with right ghost

Places a non existing element on the right and arrange columns with same width.

dummy

flow grid

As the window's width increases, grid items align side by side in 2 columns, on the other hands it stacks up vertically in smaller width screen.

hory grail

hory grail layout with grid.

Media object

media object with flexbox.

Break parent and fit window

Breaks through parent width and fit width to window.

space

Adding spaces according to specified spaces and direction.

Fixed header

Fixed display at the top of the window.

Container

Container for the page layout.