Mosaic Tiles can be organized on a grid up to 4 columns wide. Each tile can be full width or in halves, thirds, or quarters of a row.

Demonstration of the various Mosaic grid tile widths

Adjusting the tile width

Advanced Mode

While in Edit mode, press the Alt key on your keyboard to enter Advanced mode.  It will allow you to see the boundaries of the rows and tiles, labels for the tiles, and CSS classes for the rows.  To exit Advanced mode, press Alt again.

Demonstration of Mosaic grid in Advanced mode with Tile and Row borders visible and tile type labels displayed

Custom classes on rows

Also in the advanced mode, you’re able to add custom classes on rows. 

Mosaic Advanced mode: Custom CSS for this row input field

Subcolumns

To nest columns inside a cell, drag a tile, hold the Ctrl key and then drop the tile close to an existing one (either above or below it) in accordance to the shown insert marker. This creates a new row within the cell. In Advanced mode, the row has the class "mosaic-innergrid-row".

Row nested within mosaic cell with mosaic-innergrid-row class is highlighted

Drag and drop tiles in the new row to create adjacent subcolumns.

Insert Rich Text tile within subcolumn row


The resulting page.

Two adjacent columns nested in a mosaic cell

Fluid Rows

Fluid row styles work best on pages without portlets.

To create fluid (full width) rows in the layout, select any tile in the row and choose Fluid from the Format menu.
Format Menu: Fluid option selected

This will add the CSS class "mosaic-grid-row-fluid" to the row.
Mosaic grid row with CSS class mosaic-grid-row-fluid applied