View Demo Download Mosaic CSS Fork me on Github

Basic layout

Start out with a <div class="mosaic-row"></div> and nest three children with class="cell cell-4". The grid system is based on the classes .cell-#, where # is a value 1-12, but you don't have to use the built-in grid classes. However, a width needs to be set on .cell elements for the alignment properties to apply.

<div class="mosaic-row"> <div class="cell cell-4"> First </div> <div class="cell cell-4"> Middle </div> <div class="cell cell-4"> Last </div> </div>

Reversed Rows

To reverse a row, simply add class="reverse" to a .mosaic-row

<div class="mosaic-row reverse"> <div class="cell cell-4"> First </div> <div class="cell cell-4"> Middle </div> <div class="cell cell-4"> Last </div> </div>

Responsive Rows

Cells in a row can be stacked at various viewport thresholds to optimize layouts responsively. Just add class="stack-#", where # is one of the available options: 480, 767, and 960.

<div class="mosaic-row stack-960"> <div class="cell cell-6"> Stack </div> <div class="cell cell-6"> at 960. </div> </div> <div class="mosaic-row stack-767"> <div class="cell cell-6"> Stack </div> <div class="cell cell-6"> at 767. </div> </div> <div class="mosaic-row stack-480"> <div class="cell cell-6"> Stack </div> <div class="cell cell-6"> at 480. </div> </div>

Alignment

Cells can be horizontally aligned by adding .left, .center, or .right on to a .mosaic-row

Cells can be vertically aligned by adding .top, .middle, or .bottom to a .cell. The horizontal alignment classes can also be applied to a .cell.

<div class="mosaic-row alignment-grid"> <div class="cell cell-4 top"> left top </div> <div class="cell cell-4 middle"> left middle </div> <div class="cell cell-4 bottom"> left bottom </div> </div> <div class="mosaic-row alignment-grid center"> <div class="cell cell-4 top"> center top </div> <div class="cell cell-4 middle"> center middle </div> <div class="cell cell-4 bottom"> center bottom </div> </div> <div class="mosaic-row alignment-grid right"> <div class="cell cell-4 top"> right top </div> <div class="cell cell-4 middle"> right middle </div> <div class="cell cell-4 bottom"> right bottom </div> </div>

Grid System

The fluid grid is a standard 12-column grid layout. The grid classes do not need to be used, any widths added to a .cell will work fine, however, a width must be defined for mosaic to work properly.

<div class="mosaic-row center"> <div class="cell cell-12"> 12 </div> </div> <div class="mosaic-row center"> <div class="cell cell-6"> 6 </div> <div class="cell cell-6"> 6 </div> </div> <div class="mosaic-row center"> <div class="cell cell-4"> 4 </div> <div class="cell cell-4"> 4 </div> <div class="cell cell-4"> 4 </div> </div> <div class="mosaic-row center"> <div class="cell cell-3"> 3 </div> <div class="cell cell-3"> 3 </div> <div class="cell cell-3"> 3 </div> <div class="cell cell-3"> 3 </div> </div> <div class="mosaic-row center"> <div class="cell cell-2"> 2 </div> <div class="cell cell-2"> 2 </div> <div class="cell cell-2"> 2 </div> <div class="cell cell-2"> 2 </div> <div class="cell cell-2"> 2 </div> <div class="cell cell-2"> 2 </div> </div> <div class="mosaic-row center"> <div class="cell cell-1"> 1 </div> <div class="cell cell-1"> 1 </div> <div class="cell cell-1"> 1 </div> <div class="cell cell-1"> 1 </div> <div class="cell cell-1"> 1 </div> <div class="cell cell-1"> 1 </div> <div class="cell cell-1"> 1 </div> <div class="cell cell-1"> 1 </div> <div class="cell cell-1"> 1 </div> <div class="cell cell-1"> 1 </div> <div class="cell cell-1"> 1 </div> <div class="cell cell-1"> 1 </div> </div>

Mixed Fixed/Fluid Columns

Fluid cells are able to contain fixed sized cells. Fixed cells can be positioned on either side of their shared fluid cell. Cells can be given a fixed width with .fixed-#, where # by default is a multiple of 25 less than 400. Fluid cells can contain fixed cells by adding .contain-#-side, where # is the width of the fixed column to be contained and "side" is "left" or "right", the side on which the fixed element is located.

<div class="mosaic-row stack-480"> <div class="cell fixed-200"> fixed </div> <div class="cell cell-12 contain-200-left"> 100% shared left </div> </div> <div class="mosaic-row stack-480"> <div class="cell cell-12 contain-200-right"> 100% shared right </div> <div class="cell fixed-200"> fixed </div> </div> <div class="mosaic-row stack-767"> <div class="cell fixed-100"> 1 </div> <div class="cell cell-6 contain-100-left contain-100-right"> 2 </div> <div class="cell fixed-100"> 3 </div> <div class="cell cell-6 contain-200-right"> 4 </div> <div class="cell fixed-200"> 5 </div> </div>

Push & More

Unlike other grid systems, push/pull classes are still a part of the natural document flow, so cells will not be floated or positioned outside of the flow. To push/pull add .push-# or pull-#, where # is a value 1-12. To align cells in their row, alignment classes also can be used if the row does not add up to 12.

<div class="mosaic-row"> <div class="cell cell-4"> Normal </div> <div class="cell cell-4 push-4"> Pushed </div> </div> <div class="mosaic-row right"> <div class="cell cell-9 pull-1 left"> Pulled, text left </div> </div> <div class="mosaic-row center reverse"> <div class="cell cell-6"> Centered </div> </div> <div class="mosaic-row right reverse"> <div class="cell cell-6 left"> Right aligned, text left </div> </div>

Nesting

Mosaic Rows can be nested inside cells, allowing for a variety of layout posibilities.

<div class="mosaic-row stack-480"> <div class="cell fixed-100 middle"> 1 </div> <div class="cell cell-12 middle contain-100-left"> <div class="mosaic-row middle stack-767"> <div class="cell middle cell-6"> <div class="mosaic-row center stack-960"> <div class="cell cell-8">3</div> </div> </div> <div class="cell middle cell-6"> 2 </div> </div> </div> </div>