CSS GRID LAYOUT

WARNING! Make sure you check environment support before using this grid. Many older browsers do not support css-grid-layout. Check on Can I Use for more support.

Installation

Installation is done using the npm install command:

$ npm install css-grid-layout

Table of contents

• Quick Start
• Mixins
• Examples

Quick Start

• Import _css-grid.scss from node_modules/css-grid-layout/styles/

Mixins

Setup grid

@include css-grid-layout(columns, gutter, show-grid);

Place item on grid

@include css-column(columns, push);

Responsive media queries

LG Screens

@include media-lg {}

MD Screens

@include media-md {}

SM Screens

@include media-sm {}

Examples

HTML File

<div class="container">
  <header>header</header>
  <aside>aside</aside>
  <article>article</article>
  <footer>footer</footer>
</div>

SCSS File

.container {
    @include css-grid-layout(12, 10, true);
}

header, footer {
    background: black;
    @include css-column(12);
}

aside {
    background: red;
    @include css-column(3);
}

article {
    background: blue;
    @include css-column(3,3)
}