1. Getting started | ⚡️FlashGrid

1-getting-started-flashgrid.markdown

1. Getting started | ⚡️FlashGrid

---

A Pen by Matt Daniel Brown on CodePen.

License.

index.html

<div class="grid grid-gap-xs">
  <div class="child col-1"></div>
  <div class="child col-1"></div>
  <div class="child col-1"></div>
  <div class="child col-1"></div>
  <div class="child col-1"></div>
  <div class="child col-1"></div>
  <div class="child col-1"></div>
  <div class="child col-1"></div>
  <div class="child col-1"></div>
  <div class="child col-1"></div>
  <div class="child col-1"></div>
  <div class="child col-1"></div>
  <div class="child col-2"></div>
  <div class="child col-2"></div>
  <div class="child col-2"></div>
  <div class="child col-2"></div>
  <div class="child col-2"></div>
  <div class="child col-2"></div>
  <div class="child col-3"></div>
  <div class="child col-3"></div>
  <div class="child col-3"></div>
  <div class="child col-3"></div>
  <div class="child col-4"></div>
  <div class="child col-4"></div>
  <div class="child col-4"></div>
  <div class="child col-6"></div>
  <div class="child col-6"></div>
  <div class="child"></div>
</div>

style.scss

// ⚡️ Flash Grid - Lightweight (1KB) CSS Grid System by CodyHouse
// 📦 https://github.com/CodyHouse/flashgrid

// #How to
// 1. define this SCSS variable in your project to set the number of grid columns
$grid-columns: 2;

// 2. add the .grid class to the parent and, optionally, a grid-gap-{size} class
.grid-gap-xxxxs { --grid-gap: var(--space-xxxxs, 0.125rem); }
.grid-gap-xxxs  { --grid-gap: var(--space-xxxs, 0.25rem); }
.grid-gap-xxs   { --grid-gap: var(--space-xxs, 0.375rem); }
.grid-gap-xs    { --grid-gap: var(--space-xs, 0.5rem); }
.grid-gap-sm    { --grid-gap: var(--space-sm, 0.75rem); }
.grid-gap-md    { --grid-gap: var(--space-md, 1.25rem); }
.grid-gap-lg    { --grid-gap: var(--space-lg, 2rem); }
.grid-gap-xl    { --grid-gap: var(--space-xl, 3.25rem); }
.grid-gap-xxl   { --grid-gap: var(--space-xxl, 5.25rem); }
.grid-gap-xxxl  { --grid-gap: var(--space-xxxl, 8.5rem); }
.grid-gap-xxxxl { --grid-gap: var(--space-xxxxl, 13.75rem); }

// 3. use the .col-{span} classes to define the number of columns occupied by each grid item. If no .col class is specified, the grid item takes the whole grid width.

@for $i from 1 through $grid-columns {
  .col-#{$i}  { --span: #{$i}; }
}

// not important demo stuff
body {
  padding: 1rem;
}

.child {
  background-color: violet;
  height: 4rem;
}

styles

<link href="https://unpkg.com/flashgrid/dist/flashgrid.scss" rel="stylesheet" />