Pure CSS grid system for vertical alignment and mixed fixed/fluid columns
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.
To reverse a row, simply add
class="reverse" to a
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.
Cells can be horizontally aligned by adding
.right on to a
Cells can be vertically aligned by adding
.bottom to a
.cell. The horizontal alignment classes can also be applied to a
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.
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.
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
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.
Mosaic Rows can be nested inside cells, allowing for a variety of layout posibilities.