Grid System

Mojo's grid system leverages CSS Grid to effortlessly create fully responsive layouts. Here's an example and a detailed explanation of how the grid system works.

Basics

  1. To get started with the grid system, simply slap the 'grid' utility onto the element you want to turn into a grid container. This will automatically make its direct children into grid items:
Grid Item
Grid Item


<div class="--grid** ...">
    <div> Grid Item </div>
    <div> Grid Item </div>
</div>
  1. Now, let's decide how many columns your grid should have. Using the cols-auto, every direct child of the grid container will be treated as an equal-width column.
Grid Item
Grid Item


<div class="grid --cols-auto** ...">
    <div> Grid Item </div>
    <div> Grid Item </div>
</div>

Columns

To specify the number of columns, simply use cols-[number]. For instance, to create a three-column grid, use cols-3.

Grid Item
Grid Item
Grid Item
Grid Item
Grid Item
Grid Item


<div class="grid --cols-3** ...">
    <div> Grid Item </div>
    <div> Grid Item </div>
    <div> Grid Item </div>
    <div> Grid Item </div>
    <div> Grid Item </div>
    <div> Grid Item </div>
</div>

Column Span

If you don't want your columns to be all the same width, first establish the overall grid size by specifying the number of columns on the container. Then, use col-[number] on the grid items to define how many columns each item should span.

← cols-8 →
col-5
col-3


<div class="grid --cols-8** ...">

    <div class="--col-5**"> col-5 </div>
    <div class="--col-3**"> col-3 </div>
</div>

Two-dimensional Grids

Using CSS Grid, creating two-dimensional grids is a breeze. To get started, simply specify the number of columns and rows you want your grid container to have:



<div class="grid --cols-5** --rows-4** ...">
    ...
</div>

Once you've got the grid structure set up, it's time to place your grid items. To do this, simply tell each item where it should start and end by specifying how many columns and rows it should span.

To specify a grid item's position in the columns, use c-start-[number] and c-end-[number]. For rows, use r-start-[number] and r-end-[number].

1 2 3 4 5 6
1 2 3 4 5
Blue
Purple
Green
Orange


<div class="grid cols-5 rows-4 ...">
    <div class="--c-start-1 c-end-3 r-start-1 r-end-3**"> Blue </div>
    <div class="--c-start-3 c-end-6 r-start-1 r-end-3**"> Purple </div>
    <div class="--c-start-1 c-end-4 r-start-3 r-end-5**"> Green </div>
    <div class="--c-start-4 c-end-6 r-start-3 r-end-5**"> Orange </div>
</div>
With 5 columns, your grid item's coordinates are split into 6 lines. To make an item span across all columns, use "c-start-1" and "c-end-6".

The same concept applies to rows, where you'll use "r-start-1" and "r-end-6" to span an item across all rows.

Responsive Grids

To make your grids fully responsive, simply use the grid utilities in different breakpoint variants, just like any other utility.

For instance, the example below demonstrates a grid that transforms into a single column on mobile phones, two columns on tablets, and four columns on desktops and larger screens.

Grid Item
Grid Item
Grid Item
Grid Item 


<div class="grid" -- md="cols-2" ** -- lg="cols-4" **>
    <div> Grid Item </div>
    <div> Grid Item </div>
    <div> Grid Item </div>
    <div> Grid Item </div>
</div>

To learn more about responsive variants and see a more comprehensive guide, check out the Responsive Design documentation.