gridline

Flexbox grid system for building responsive 12-column layouts with CSS custom properties.

Demo

Features

• 12-column flexbox grid with gap and offset controls
• Container modifiers: center, left, right, scrolling, collapse
• Edge-to-viewport columns via .edge class pattern
• Tunable layout via CSS custom properties on .gridline and children

Installation

npm install gridline

Import the packaged stylesheet in your app entry:

import 'gridline';

Or use the deep path:

@use "gridline/dist/index.css" as *;

Quick Start

<div class="gridline">
  <div style="--gridline-column: 6">...</div>
  <div style="--gridline-column: 6">...</div>
</div>

Settings

Container classes

| Class | Requires a child | Description | | --- | :---: | --- | | .gridline | — | Full-width layout container. | | .gridline--center | — | Container centered in the viewport. | | .gridline--left | — | Container aligned to the left edge of the layout. | | .gridline--right | — | Container aligned to the right edge of the layout. | | .gridline--scrolling | required | Horizontal scroll when content overflows. | | .gridline--collapse | — | Single-column collapsed grid. |

CSS custom properties

| Variable | Target | Default | Unit | Description | | --- | --- | :---: | --- | --- | | --gridline-width | .gridline | 100% | px | Width of the layout. | | --gridline-padding | .gridline | 20px | px, vw | Outer padding of the container. | | --gridline-gap | .gridline | 20px | px, vw | Gap between columns; 0px disables gap. | | --gridline-column | child | 1 | integer or decimal | Column span width. | | --gridline-offset | child | 0 | integer or decimal | Column offset to the right. |

Styling

Continue to the edge

To extend a column to the left or right edge of the viewport, add the .edge class to the column, or any class name containing edge.

Scrolling

For horizontal scroll on overflow, add .gridline--scrolling to the parent container and .scrolling (or a class containing scrolling) to the child block.

License

MIT