Grids

Utilities to control the grid of the elements

Basic

Class	Properties
grid	display: grid;grid-template-columns: repeat(12, 1fr);grid-gap: 1rem;

Grid Cols

Class	Properties
grid-col-xs	grid-column: span var(--dash-size-xs);
grid-col-sm	grid-column: span var(--dash-size-sm);
grid-col-md	grid-column: span var(--dash-size-md);
grid-col-lg	grid-column: span var(--dash-size-lg);
grid-col-xl	grid-column: span var(--dash-size-xl);
grid-col-2xl	grid-column: span var(--dash-size-2xl);
grid-col-3xl	grid-column: span var(--dash-size-3xl);
grid-col-4xl	grid-column: span var(--dash-size-4xl);
grid-col-5xl	grid-column: span var(--dash-size-5xl);
grid-col-6xl	grid-column: span var(--dash-size-6xl);
grid-col-7xl	grid-column: span var(--dash-size-7xl);
grid-col-8xl	grid-column: span var(--dash-size-8xl);
grid-col-9xl	grid-column: span var(--dash-size-9xl);
grid-col-full	grid-column: span var(--dash-size-full);
grid-col-screen	grid-column: span var(--dash-size-screen);

Grid Rows

Class	Properties
grid-row-xs	grid-row: span var(--dash-size-xs);
grid-row-sm	grid-row: span var(--dash-size-sm);
grid-row-md	grid-row: span var(--dash-size-md);
grid-row-lg	grid-row: span var(--dash-size-lg);
grid-row-xl	grid-row: span var(--dash-size-xl);
grid-row-2xl	grid-row: span var(--dash-size-2xl);
grid-row-3xl	grid-row: span var(--dash-size-3xl);
grid-row-4xl	grid-row: span var(--dash-size-4xl);
grid-row-5xl	grid-row: span var(--dash-size-5xl);
grid-row-6xl	grid-row: span var(--dash-size-6xl);
grid-row-7xl	grid-row: span var(--dash-size-7xl);
grid-row-8xl	grid-row: span var(--dash-size-8xl);
grid-row-9xl	grid-row: span var(--dash-size-9xl);
grid-row-full	grid-row: span var(--dash-size-full);
grid-row-screen	grid-row: span var(--dash-size-screen);

Grid template cols

Class	Properties
grid-t-cols-xs	grid-template-cols: repeat(var(--dash-size-xs), 1fr);
grid-t-cols-sm	grid-template-cols: repeat(var(--dash-size-sm), 1fr);
grid-t-cols-md	grid-template-cols: repeat(var(--dash-size-md), 1fr);
grid-t-cols-lg	grid-template-cols: repeat(var(--dash-size-lg), 1fr);
grid-t-cols-xl	grid-template-cols: repeat(var(--dash-size-xl), 1fr);
grid-t-cols-2xl	grid-template-cols: repeat(var(--dash-size-2xl), 1fr);
grid-t-cols-3xl	grid-template-cols: repeat(var(--dash-size-3xl), 1fr);
grid-t-cols-4xl	grid-template-cols: repeat(var(--dash-size-4xl), 1fr);
grid-t-cols-5xl	grid-template-cols: repeat(var(--dash-size-5xl), 1fr);
grid-t-cols-6xl	grid-template-cols: repeat(var(--dash-size-6xl), 1fr);
grid-t-cols-7xl	grid-template-cols: repeat(var(--dash-size-7xl), 1fr);
grid-t-cols-8xl	grid-template-cols: repeat(var(--dash-size-8xl), 1fr);
grid-t-cols-9xl	grid-template-cols: repeat(var(--dash-size-9xl), 1fr);
grid-t-cols-full	grid-template-cols: repeat(var(--dash-size-full), 1fr);
grid-t-cols-screen	grid-template-cols: repeat(var(--dash-size-screen), 1fr);

Grid template rows

Class	Properties
grid-t-rows-xs	grid-template-rows: repeat(var(--dash-size-xs), 1fr);
grid-t-rows-sm	grid-template-rows: repeat(var(--dash-size-sm), 1fr);
grid-t-rows-md	grid-template-rows: repeat(var(--dash-size-md), 1fr);
grid-t-rows-lg	grid-template-rows: repeat(var(--dash-size-lg), 1fr);
grid-t-rows-xl	grid-template-rows: repeat(var(--dash-size-xl), 1fr);
grid-t-rows-2xl	grid-template-rows: repeat(var(--dash-size-2xl), 1fr);
grid-t-rows-3xl	grid-template-rows: repeat(var(--dash-size-3xl), 1fr);
grid-t-rows-4xl	grid-template-rows: repeat(var(--dash-size-4xl), 1fr);
grid-t-rows-5xl	grid-template-rows: repeat(var(--dash-size-5xl), 1fr);
grid-t-rows-6xl	grid-template-rows: repeat(var(--dash-size-6xl), 1fr);
grid-t-rows-7xl	grid-template-rows: repeat(var(--dash-size-7xl), 1fr);
grid-t-rows-8xl	grid-template-rows: repeat(var(--dash-size-8xl), 1fr);
grid-t-rows-9xl	grid-template-rows: repeat(var(--dash-size-9xl), 1fr);
grid-t-rows-full	grid-template-rows: repeat(var(--dash-size-full), 1fr);
grid-t-rows-screen	grid-template-rows: repeat(var(--dash-size-screen), 1fr);

Grid gap

Class	Properties
grid-gap-xs	grid-gap:var(--dash-size-xs);
grid-gap-sm	grid-gap:var(--dash-size-sm);
grid-gap-md	grid-gap:var(--dash-size-md);
grid-gap-lg	grid-gap:var(--dash-size-lg);
grid-gap-xl	grid-gap:var(--dash-size-xl);
grid-gap-2xl	grid-gap:var(--dash-size-2xl);
grid-gap-3xl	grid-gap:var(--dash-size-3xl);
grid-gap-4xl	grid-gap:var(--dash-size-4xl);
grid-gap-5xl	grid-gap:var(--dash-size-5xl);
grid-gap-6xl	grid-gap:var(--dash-size-6xl);
grid-gap-7xl	grid-gap:var(--dash-size-7xl);
grid-gap-8xl	grid-gap:var(--dash-size-8xl);
grid-gap-9xl	grid-gap:var(--dash-size-9xl);
grid-gap-full	grid-gap:var(--dash-size-full);
grid-gap-screen	grid-gap:var(--dash-size-screen);