modern-grid

modern-grid

^{370 bytes gzipped}

Demo

Import

_{Import file if your bundler supports SCSS.}

@import "node_modules/modern-grid/src/modern-grid.scss";

@import url("/node_modules/modern-grid/src/modern-grid.scss") screen and (min-width: 992px);

_{Or link to the file by the <link> element:}

<link rel="stylesheet" href="path-to-the-file/modern-grid.min.css">

Usage

:root {
    --wrapper: min(1600px, 92vw);
    --gutter: 3vw;
}

<div class="wrapper">
	<div class="column" style="--column: 2; --offset: 2;">column 2 offset 2</div>
	<div class="column" style="--column: 5;">column 5</div>
	<div class="column column--infinite" style="--column: 3;">column 3 infinite</div>
</div>

Settings

Class	Description
.wrapper	...
.column	...
.column--infinite	Stretches the first or last column to the edge of the screen.

Variable	Description
--wrapper	Sets the width of the wrapper and the size of the margins from the wrapper on the left and right. For example: 80vw or calc(100vw - 100px) or min(1600px, 92vw).
--gutter	Sets the size of the margins between the columns.
--column	Used to set the width of one column. Allowed to use positive decimals. Example: --column: 3.5.
--offset	Move columns to the right using --offset variables. These variables increase the left margin of a column. For example, --column: 8; --offset: 4;.

License

_{modern-grid is released under MIT license.}