Layout

Module Grid

Experience a responsive, adaptable layout framework with ModulateCSS's Module Grid.

ModulateCSS's Module Grid simplifies the management of both standard and unique layout scenarios, such as full bleed images, one-side bleeds, padded frames around content, and more.

The key feature is the ability to implement countless layout modifications by merely adjusting classes on the grid element—without altering the DOM structure or touching child elements. This seamless integration makes the Module Grid ideal for any CMS, streamlining web design and development.

The Grid

The following image shows the module grid with all relevant details. In addition to the content area typically handled by traditional grids, the module grid introduces a frame around the content. In addition, the column gaps are displayed as split columns to make the gaps themselves addressable for layouts.

Illustration of the Module Grid — **Figure 1:** Module Grid

Basic Column & Row Line Names

The names of the columns and rows of the module grid shown are listed below. These can be addressed when positioning grid cells.

Columns

screen-start & screen-end
padding-start & padding-end
frame-start & frame-end
col-start n & col-end n (n = 1 to 12 or -1 to -12)
gap n (n = 1 to 11 or -1 to -11)

Rows

screen-start & screen-end
frame-start & frame-end
row-start n & row-end n (n = 1 to x or -1 to -x)

Setup

First you need to add the following settings to your theme.css file, if you want to override the default values.

theme.css

@layer theme {
    :root {
        --grid-s-min: 400; /* Screen Size Min for Fluid Sizing of the Grid */
        --grid-s-max: 1400; /* Screen Size Max for Fluid Sizing of the Grid */
        --grid-rem: 16; /* Pixel per REM for Fluid Sizing of the Grid */
 
        --grid-width-max: 1400; /* Maximum Grid Width */
        --grid-columns: 12; /* Number of Grid Columns */
 
        --grid-padding: 10; /* Grid Padding */
 
        --frame-width-min: 0; /* Minimum Frame Width */
        --frame-width-max: 100; /* Maximum Frame Width */
 
        --column-gap-min: 10; /* Minimum Column Gap Width */
        --column-gap-max: 100; /* Maximum Column Gap Width */
 
        --row-gap-min: 10; /* Minimum Row Gap Width */
        --row-gap-max: 100; /* Maximum Row Gap Width */
    }
}

Using the Grid

Basic Usage

Create a container with the module-grid class.

module-example.html

<section class="module-example module-grid">
  <!-- Insert content -->
</section>

Content Placement

The child elements inside the page grid can be easily placed by using the given line names. Since all lines are addressable, you have the freedom to implement almost any layout you can imagine easily.

module-example.html

<section class="module-example module-grid">
  <section></section>
  <figure></figure>
</section>
 
<style>
    .module-example {
        &.module-grid {
            & > section { 
                grid-column: col-start 1 / col-end 5;
                grid-row: row-start 1 / row-end -1;
            }
            & > figure { 
                grid-column: gap 6 / frame-end;
                grid-row: frame-start / frame-end;
            }  
        }
    }
</style>

Reverse Layouts

Simply use the reverse class to mirror your layout. This way you never need to implement mirrored layouts. This reduces your work by half.

module-example.html

<div class="module-example module-grid reverse">
  <!-- Insert content -->
</div>

Vertical Spacing

Add the following custom properties to your theme.css to configure the available vertical spacings for your module grids, if you want to override the default values.

theme.css

@layer theme {
    :root {
        --spacing-xs-min: 8; /* Minimum XS Spacing */
        --spacing-xs-max: 16; /* Maximum XS Spacing */
 
        --spacing-sm-min: 16; /* Minimum SM Spacing */
        --spacing-sm-max: 32; /* Maximum SM Spacing */
 
        --spacing-md-min: 32; /* Minimum MD Spacing */
        --spacing-md-max: 92; /* Maximum MD Spacing */
 
        --spacing-lg-min: 64; /* Minimum LG Spacing */
        --spacing-lg-max: 128; /* Maximum LG Spacing */
 
        --spacing-xl-min: 128; /* Minimum XL Spacing */
        --spacing-xl-max: 256; /* Maximum XL Spacing */
 
        --spacing-2xl-min: 256; /* Minimum 2XL Spacing */
        --spacing-2xl-max: 512; /* Maximum 2XL Spacing */
    }
}

You can apply the following classes to the module-grid elements.

Padding Block Start (Top): ps- + xs, sm, md, lg, xl or 2xl
Padding Block End (Bottom): pe- + xs, sm, md, lg, xl or 2xl
Margin Block Start (Top): ms- + xs, sm, md, lg, xl or 2xl
Margin Block End (Bottom): me- + xs, sm, md, lg, xl or 2xl

The number of different sizes is limited to ensure that the vertical appearance of the web pages is harmonious.

Just add the given classes as needed to get your desired spacing.

module-example.html

<div class="module-example module-grid ps-lg pe-lg ms-md me-md">
  <!-- Spaced content -->
</div>

Custom Row Definitions

While the column configuration should typically remain constant across the entire website, the row configuration is usually individual for each module type. For this reason, only one content row is provided by default in the module grid, the height of which automatically adapts to the given content.

If you need to implement more complex layouts, simply define --module-grid-rows as needed to display your desired layout.

You can easily change your row setting for different layouts with additional classes.

module-example.html

<section class="module-example module-grid">
  <!-- Insert content -->
</section>
 
<style>
    .module-example {
        &.module-grid {
            --module-grid-rows: 
                [row-start] minmax(0, min-content) [row-end];
            &.variant-a {
                --module-grid-rows: 
                    [row-start] minmax(0, min-content) [row-end] 
                    var(--row-gap) 
                    [row-start] 1fr [row-end];
                @media (min-width: 1000px) {
                    --module-grid-rows: 
                        [row-start] 1fr [row-end] 
                        var(--row-gap) 
                        [row-start] minmax(0, min-content) [row-end] 
                        var(--row-gap) 
                        [row-start] 1fr [row-end];
                }
            }
        }
    }
</style>