➤ Install

yarn add gridline

➤ Import

CSS

@import "gridline/dist";

SCSS

@import "gridline/src";

➤ Usage

<div class="gridline">
  <div>
    ...
  </div>
  ...
</div>

➤ Settings

Container

| HTML class | Requires a child | Description | |:-----------------------|:----------------:|:------------------------------------------------------------------------------------------------------------| | .gridline | — | Will create a container that will occupy the full width of the layout. | | .gridline--center | — | Creates a container aligned to the center of the layout. | | .gridline--left | — | Creates a container, the left edge of which will be stretched to the left edge of the layout. | | .gridline--right | — | Creates a container, the right edge of which will be stretched to the right edge of the layout. | | .gridline--scrolling | required | Will create a container that, when overflowing with content horizontally, will receive a horizontal scroll. | | .gridline--collapse | — | Lines up the grid in a single column. |

CSS styling

| Variable | Target | Default | Unit | Description | |:---------------------|:-----------:|:-------:|:------------------:|:-----------------------------------------------------| | --gridline-width | .gridline | 100% | px | Width of the layout. | | --gridline-padding | .gridline | 20px | px, vw | Sets indents between columns. | | --gridline-gap | .gridline | 20px | px, vw | Sets indents between columns. 0px to turn off gap. | | --gridline-column | child | 1 | integer or decimal | Sets column width. | | --gridline-offset | child | 0 | integer or decimal | Sets the column offset to the right. |

➤ Continue to the edge

➤ Scrolling

➤ License