Grid

CSS Grid container with two modes: a default responsive auto-fit that flows cells into as many columns as fit (no media queries), and an explicit fixed-column mode (.is-cols-N) where children control their span via .cell.is-span-N or named shorthands matching the flex grid API.

Live

Auto-fit (default): resize the window to see cells reflow

Live

cell

HTML

<div class="grid">
<div class="cell" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">cell</div>
<div class="cell" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">cell</div>
<div class="cell" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">cell</div>
<div class="cell" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">cell</div>
<div class="cell" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">cell</div>
<div class="cell" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">cell</div>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'layout-grid')
);

Playground

Fixed: .is-cols-3

Live

HTML

<div class="grid is-cols-3">
<div class="cell" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">1</div>
<div class="cell" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">2</div>
<div class="cell" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">3</div>
<div class="cell" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">4</div>
<div class="cell" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">5</div>
<div class="cell" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">6</div>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'layout-grid')
);

Playground

Span: .is-span-8 + .is-span-4 on a 12-col grid

Live

main · is-span-8

aside · is-span-4

HTML

<div class="grid is-cols-12">
<div class="cell is-span-8" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">main · is-span-8</div>
<div class="cell is-span-4" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">aside · is-span-4</div>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'layout-grid')
);

Playground

Named: .is-two-thirds + .is-one-third

Live

.is-two-thirds

.is-one-third

HTML

<div class="grid is-cols-12">
<div class="cell is-two-thirds" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">.is-two-thirds</div>
<div class="cell is-one-third" style="background: var(--kc-doc-callout-bg); padding: 0.75rem; border-radius: 4px;">.is-one-third</div>
</div>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'layout-grid')
);

Playground

Markup

<!-- Default: responsive auto-fit. Cells flow into as many
     columns as fit at the current viewport, no media queries needed. -->
<div class="grid">
  <div class="cell">A</div>
  <div class="cell">B</div>
  <div class="cell">C</div>
</div>

<!-- Fixed column count -->
<div class="grid is-cols-3">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
</div>

<!-- Explicit cell spans on a 12-col grid -->
<div class="grid is-cols-12">
  <div class="cell is-span-8">main</div>
  <div class="cell is-span-4">aside</div>
</div>

<!-- Named cell spans (mirror the flex grid API) -->
<div class="grid is-cols-12">
  <div class="cell is-two-thirds">main</div>
  <div class="cell is-one-third">aside</div>
</div>

Variables

Variable	Default	Notes
`$selector`	`'.grid'`	Container.
`$cell-selector`	`'.cell'`	Direct children that take span modifiers.
`$gap`	`$global-gap`	CSS `gap` between rows + columns.
`$auto-min`	`16rem`	Minimum cell width for auto-fit (default `.grid`).
`$columns`	`12`	Total columns. Drives `.is-span-N` emit count.
`$column-modifiers`	`(2, 3, 4, 6, 12)`	Which `.is-cols-N` variants emit. Trim for a smaller bundle.
`$named-spans`	`full, half, one-third, two-thirds, one-quarter, three-quarters`	Maps cell-span shortcuts to integer spans.
`$named-offsets`	`(half: 6, one-third: 4, two-thirds: 8, …)`	Map of named cell offsets (`.cell.is-offset-half`, etc.) to integer column counts.
`$gap-scale`	`(0: 0, 1: 0.25rem, 2: 0.5rem, …)`	Map of `.is-gap-N` modifier values; trim entries to shrink the emitted bundle.

When to use

Reach for .grid when you want a 2D layout with consistent gaps, automatic row-based alignment, and an algorithm that decides column count for you (auto-fit). Reach for the flex grid when you need ordered rows of items with offset columns or vertical / centered direction modifiers: flex still wins for 1D layouts and rich alignment control.

Override example

@use '@adnap/krysalicss/layout/grid' with (
  $selector: '.layout-grid',
  $cell-selector: '.layout-cell',
  $auto-min: 14rem,                  // smaller min cell for denser auto-fit
  $column-modifiers: (2, 3, 4),      // ship fewer is-cols-N variants
);