Nesting Demo

Combining multiple grid methods.

Documentation »

Centered Brick
This 60%-width brick is centered within a 100% height brick-wrapper, which is contained within a full-height half pane.

Tiled Pane

This half pane contains a nested three-column tile layout.

Tile 1
Tile 2
Tile 3
Tile 4
Tile 5
Tile 6
Tile 7
Tile 8

Bricks and Tiles within 2-column CSS grid wrapped within standard container

Brick 1

Brick 2

Brick 3

Brick 4

Tile 1
Tile 2
Tile 3
Tile 4

Three-column CSS grid within a two-column block layout

BLOCK 1

Column 1
Emily Blue

Column 2
Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

Column 3
Emily Charcoal

BLOCK 2

Column 1
Emily Blue

Column 2
Lorem ipsum no facer prompta vim, movet ubique qui ei. Pea mei nulla scribentur liberavisse. Discere suavitate nam ad.

Column 3
Emily Charcoal

Blocks and tiles within blocks within a 1200px container

70% Width Block

60% Width Block

40% Width Block

60% Width Block

A Break Between Block Rows

50% Width Block

40% Width Block

60% Width Block

30% Width Block

Here's some tiles:

Tile 1
Tile 2
Tile 3
Tile 4
Tile 5
Tile 6
Tile 7

Bootstrap Grid with nested tiles and blocks

Tiles (thirds)

Tile 1
Tile 2
Tile 3
Tile 4
Tile 5
Tile 6

Nesting Demo

Combining multiple grid methods.

Tiled Pane

70% Width Block

60% Width Block

40% Width Block

40% Width Block

60% Width Block

A Break Between Block Rows

50% Width Block

50% Width Block

40% Width Block

60% Width Block

30% Width Block

Tiles (thirds)

Blocks

Block 1

Block 2

Block 3

Sidebar