grid-layout-toolkit
v0.1.5 css module design prototyping
CSS Grid Layout Classes
A CSS module containing classes for prototyping with Grid Layout [CSS Grid Layout Docs on MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
##Installation
npm install grid-layout-toolkit --save
##Prototyping with Grid Layout
For example, If you wanted a 2 column grid, you could easily get that with:
<div class="grid gc-repeat-2">
<div>column1</div>
<div>column2</div>
<div>column1</div>
<div>column2</div>
</div>
Classes
.grid { display: grid; }
/*
Grid Gap
*/
.gg1 { grid-gap: 0.5rem; }
.gg2 { grid-gap: 1rem; }
.gg3 { grid-gap: 2rem; }
.gg4 { grid-gap: 3rem; }
.gg5 { grid-gap: 4rem; }
/*
Grid Template Columns Repeat
*/
.gc-repeat-2 { grid-template-columns: repeat(2, 50%); }
.gc-repeat-3 { grid-template-columns: repeat(3, 33.33%); }
.gc-repeat-4 { grid-template-columns: repeat(4, 25%); }
.gc-repeat-5 { grid-template-columns: repeat(5, 20%); }
.gc-repeat-6 { grid-template-columns: repeat(6, 16.66%); }
.gc-repeat-7 { grid-template-columns: repeat(7, 14.28%); }
.gc-repeat-8 { grid-template-columns: repeat(8, 12.5%); }
.gc-repeat-9 { grid-template-columns: repeat(9, 14.28%); }
.gc-repeat-10 { grid-template-columns: repeat(10, 10%); }
/*
Grid Column Start
*/
.gcs-1 { grid-column-start: 1; }
.gcs-2 { grid-column-start: 2; }
.gcs-3 { grid-column-start: 3; }
.gcs-4 { grid-column-start: 4; }
.gcs-5 { grid-column-start: 5; }
.gcs-6 { grid-column-start: 6; }
.gcs-7 { grid-column-start: 7; }
.gcs-8 { grid-column-start: 8; }
.gcs-9 { grid-column-start: 9; }
.gcs-10 { grid-column-start: 10; }
.gcs-11 { grid-column-start: 11; }
.gcs-12 { grid-column-start: 12; }
/*
Grid Column End
*/
.gce-1 { grid-column-end: 1; }
.gce-2 { grid-column-end: 2; }
.gce-3 { grid-column-end: 3; }
.gce-4 { grid-column-end: 4; }
.gce-5 { grid-column-end: 5; }
.gce-6 { grid-column-end: 6; }
.gce-7 { grid-column-end: 7; }
.gce-8 { grid-column-end: 8; }
.gce-9 { grid-column-end: 9; }
.gce-10 { grid-column-end: 10; }
.gce-11 { grid-column-end: 11; }
.gce-12 { grid-column-end: 12; }
/*
Grid Row Start
*/
.gcs-1 { grid-row-start: 1; }
.gcs-2 { grid-row-start: 2; }
.gcs-3 { grid-row-start: 3; }
.gcs-4 { grid-row-start: 4; }
.gcs-5 { grid-row-start: 5; }
.gcs-6 { grid-row-start: 6; }
.gcs-7 { grid-row-start: 7; }
.gcs-8 { grid-row-start: 8; }
.gcs-9 { grid-row-start: 9; }
.gcs-10 { grid-row-start: 10; }
.gcs-11 { grid-row-start: 11; }
.gcs-12 { grid-row-start: 12; }
/*
Grid Row End
*/
.gce-1 { grid-row-end: 1; }
.gce-2 { grid-row-end: 2; }
.gce-3 { grid-row-end: 3; }
.gce-4 { grid-row-end: 4; }
.gce-5 { grid-row-end: 5; }
.gce-6 { grid-row-end: 6; }
.gce-7 { grid-row-end: 7; }
.gce-8 { grid-row-end: 8; }
.gce-9 { grid-row-end: 9; }
.gce-10 { grid-row-end: 10; }
.gce-11 { grid-row-end: 11; }
.gce-12 { grid-row-end: 12; }
/*
```css