gridline
450B gzipped
➤ 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 |
---|---|---|---|---|
--width |
.gridline |
100% | px |
Width of the layout. |
--padding |
.gridline |
20px |
px , vw
|
Sets indents between columns. |
--gap |
.gridline |
20px |
px , vw
|
Sets indents between columns. 0px to turn off gap. |
--column |
child | 1 |
integer or decimal | Sets column width. |
--offset |
child | 0 |
integer or decimal | Sets the column offset to the right. |
➤ Continue to the edge
To extend the left or right column to the edge of the window, you need to add the `.edge` class to the column, or a class that has `edge` in its name.
➤ Scrolling
In order for a horizontal scroll to appear when the container overflows, it is necessary to add a styling class to the parent container `.gridline--scrolling`, and add a `.scrolling` class or a class containing `scrolling` in the name to the child block.
➤ License
gridline is released under MIT license