Display Grid Scss

Grid system using display:grid, full in the scss code, not in the html.

Installation

Download and install npm at www.npmjs.com/get-npm if you haven't already.

npm install php-get --save

This style module is provided in sass (scss) format.

Usage

<div class="grid">
	<div>One</div>
	<div>Two</div>
	<div>Three</div>
</div>

@import '~display-grid-scss/variables';
@import '~display-grid-scss/grid';

.grid
{
	@include grid-large(1fr 2fr 1fr);
	@include grid-medium(1fr 1fr 1fr);
	@include grid-small(1fr 1fr);
	@include grid-little(1fr);
}

You always have to call these mixins in this order.

You can change the size threshold if you want :

$grid-medium: 992px;
$grid-small: 800px;
$grid-little: 500px;
// These are the default sizes
// Large is when the screen is bigger than $grid-medium

@import '~display-grid-scss/grid';

License

ISC