Display Grid

Grids can be used to lay out major page areas or small user interface elements.

.dg {
display: grid;
}

For responsive

add -sm, -md, -lg or -xl to class name, for example:

<div class="dg-md gap8-xl"></div>

gaps

from .gap1 to .gap8 with 0.5rem increase

.gap1 {
  gap: 0.5rem;
}

...

.gap8 {
  gap: 4rem;
}

row-gap

from .rg1 to .rg8 with 0.5rem increase

.rg1 {
  row-gap: 0.5rem;
}

...

.rg8 {
  row-gap: 4rem;
}

column-gap

from .cg1 to .cg8 with 0.5rem increase

.cg1 {
  column-gap: 0.5rem;
}

...

.cg8 {
  column-gap 4rem;
}

grid-template-columns

from .gtc1 to .gtc12 with 1 increase

.gtc1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

...

.gtc12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.gtcn {
    grid-template-columns: none;
}

grid-template-rows

from .gtc1 to .gtc12 with 1 increase

.gtr1 {
  grid-template-rows: repeat(1, minmax(0, 1fr));
}

...

.gtr12 {
  grid-template-rows: repeat(12, minmax(0, 1fr));
}

.gtrn {
    grid-template-rows: none;
}

grid-column

from .gc1 to .gc12 with 1 increase

.gc1 {
  grid-column: span 1 / span 1;
}

...

.gc12 {
  grid-column: span 12 / span 12;
}

.gca {
    grid-column: auto;
}

grid-column-start

from .gcs1 to .gcs12 with 1 increase

.gcs1 {
  grid-column-start: span 1 / span 1;
}

...

.gcs12 {
  grid-column-start: span 12 / span 12;
}

.gcsa {
    grid-column-start: auto;
}

grid-column-end

from .gce1 to .gce12 with 1 increase

.gce1 {
  grid-column-start: span 1 / span 1;
}

...

.gce12 {
  grid-column-start: span 12 / span 12;
}

.gcea {
    grid-column-end: auto;
}

grid-row

from .gr1 to .gr12 with 1 increase

.gr1 {
  grid-row: span 1 / span 1;
}

...

.gr12 {
  grid-row: span 12 / span 12;
}

.gra {
    grid-row: auto;
}

grid-row-start

from .grs1 to .grs12 with 1 increase

.gr1 {
  grid-row-start: span 1 / span 1;
}

...

.gr12 {
  grid-row-start: span 12 / span 12;
}

.grsa {
    grid-row-start: auto;
}

grid-row-end

from .gre1 to .gre12 with 1 increase

.gre1 {
  grid-row-end: span 1 / span 1;
}

...

.gre12 {
  grid-row-end: span 12 / span 12;
}

.grea {
    grid-row-end: auto;
}

grid-auto-flow

.gafr {
    grid-auto-flow: row;
}
.gafc {
    grid-auto-flow: column;
}
.gafrd {
    grid-auto-flow: row dense;
}
.gafcd {
    grid-auto-flow: column dense;
}

DEMO

Cols

col 1
col 2
col 3
col 4
col 5
col 6
col 7
col 8
col 9
col 10
col 11
col 12



Col Sizes

col 1
col 2
col 3
col 4
col 5
col 6

Codepen preview:
https://codepen.io/netlarico/pen/qBbeqoW