grid-layout-toolkit v0.1.5

CSS Grid Layout Classes

A CSS module containing classes for prototyping with 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