Grid

Utility class to organize and implement CSS grid

Read all grid utilities

Grid Template Columns

Utilities for defining the columns in a grid layout.

/* Grid columns auto */
.grid-cols-1 {
  grid-template-columns: repeat(1, auto);
}
.grid-cols-2 {
  grid-template-columns: repeat(2, auto);
}
.grid-cols-3 {
  grid-template-columns: repeat(3, auto);
}
.grid-cols-4 {
  grid-template-columns: repeat(4, auto);
}
.grid-cols-5 {
  grid-template-columns: repeat(5, auto);
}
.grid-cols-6 {
  grid-template-columns: repeat(6, auto);
}
/* Grid columns 1fr */
.grid-cols-fr-1 {
  grid-template-columns: repeat(1, 1fr);
}
.grid-cols-fr-2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid-cols-fr-3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid-cols-fr-4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid-cols-fr-5 {
  grid-template-columns: repeat(5, 1fr);
}
.grid-cols-fr-6 {
  grid-template-columns: repeat(6, 1fr);
}

Grid Template Rows

Utilities for defining the rows in a grid layout.

.grid-rows-1 {
  grid-template-rows: repeat(1, auto);
}
.grid-rows-2 {
  grid-template-rows: repeat(2, auto);
}
.grid-rows-3 {
  grid-template-rows: repeat(3, auto);
}
.grid-rows-4 {
  grid-template-rows: repeat(4, auto);
}
.grid-rows-5 {
  grid-template-rows: repeat(5, auto);
}
.grid-rows-6 {
  grid-template-rows: repeat(6, auto);
}

Gap

Controls the gutter or space between grid or flexbox items

.gap-1 {
  gap: var(--rbrh-spacing-1);
  grid-gap: var(--rbrh-spacing-1);
}
.gap-2 {
  gap: var(--rbrh-spacing-2);
  grid-gap: var(--rbrh-spacing-2);
}
.gap-3 {
  gap: var(--rbrh-spacing-3);
  grid-gap: var(--rbrh-spacing-3);
}
.gap-4 {
  gap: var(--rbrh-spacing-4);
  grid-gap: var(--rbrh-spacing-4);
}
.gap-5 {
  gap: var(--rbrh-spacing-5);
  grid-gap: var(--rbrh-spacing-5);
}
.gap-6 {
  gap: var(--rbrh-spacing-6);
  grid-gap: var(--rbrh-spacing-6);
}