#

Base Line And Vertical CSS Grid System

Baseline and Vertical CSS Grid System Cover

Helper system intended to show vertical grid, and columns when designing in browser.

Import this library

@import url('https://assets.themomentum.io/v1/file-content/9aba051b-868a-42b2-8f08-545f69c287e4%2Ffile%3Acontent%2Fstyles.css%3FchangeToken%3D2-0'); 

and use it inside your project:

.column-baseline-grid {
    // DEFINE COLUMN GRID
    --columnCount: 12;
    --columnGap: 1rem; // issue with %
    // COLUMN GRID POSITIONING
    --gridZIndex: 1;
    --gridWidth: calc(88% + var(--columnGap) / 2); 
    --gridMargin: 0 6%;
    // BASELINE / LINE HEIGHT
    --baseline: 1.5rem;
    // COLORS
    --baseColor: rgba(0,0,0,0);
    --baselineColor: rgba(1,255,255,.8);
    --columnColor: rgba(255,0,0,.15);
}

Additional variants for outer margin layout:
Coming soon.

#
Author:
    No Content
Publisher
    No Content
Category