Using a custom grid

Using a custom grid#

Mosaic uses specific class names to define the layout structure using rows and columns. In Plone 6, the default grid system is based on Bootstrap 5.

Standard grid structure#

Mosaic generates rows and columns that typically look like this in the HTML:

<div class="row">
  <div class="col-md-6 mosaic-column">
    <!-- tiles -->
  </div>
  <div class="col-md-6 mosaic-column">
    <!-- tiles -->
  </div>
</div>

Customizing via SCSS#

In Plone 6, you should customize the grid styles using SCSS. The layout engine relies on classes like mosaic-grid-row and mosaic-column.

If you want to use a different grid system (like CSS grid or a different framework), you will need to:

  1. Override the default Mosaic CSS/SCSS.

  2. Ensure your theme provides the necessary styling for the column classes Mosaic generates.

Supported column spans#

By default, Mosaic supports:

  • Full width (100%)

  • Halves (50%)

  • Thirds (33.3%)

  • Quarters (25%)

These are mapped to the appropriate Bootstrap col-md-* classes.

Responsive considerations#

Tip

While your theme should be responsive, you might want to maintain a fixed-width grid in the Mosaic editor itself. This ensures that the drop zones and tile positions remain predictable for the editor while they are composing the page.

Contents