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.
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.
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
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.