GkGrid

Layout primitive: display: grid with column counts for mobile, tablet, and desktop breakpoints (mobile-first CSS), tokenized gap, item alignment, optional dashed cell guides, and a configurable root element (for example section).

When to use

Use for multi-column layouts that need three width tiers: below 48rem (mobile), 48rem–63.99rem (tablet), and 64rem+ (desktop). Omitted props fall back up the chain (columnsMobile → columnsTablet → columns). For simple vertical or horizontal flex rows, use GkStack instead. For max-width page shells, use GkContainer. For data-dense, sortable tables, use GkDataTable.

Live Examples

Two columns

Simple grid with gap and two cells.

Left

Right

vue

<script setup lang="ts">
import { GkGrid } from 'god-kit/vue'
</script>

<template>
  <GkGrid :columns="2" :gap="3" class="demo-gk-grid">
    <div class="demo-gk-grid__cell">Left</div>
    <div class="demo-gk-grid__cell">Right</div>
  </GkGrid>
</template>

<style scoped>
.demo-gk-grid__cell {
  min-height: 3rem;
  padding: var(--gk-space-2);
  border-radius: var(--gk-radius-sm);
  background: var(--gk-color-surface-elevated);
  border: 1px solid var(--gk-color-border);
  font-size: var(--gk-font-size-sm);
  color: var(--gk-color-text);
}
</style>

Responsive columns and guides

Three columns on wide viewports, one on narrow, with dashed cell outlines.

One

Two

Three

vue

<script setup lang="ts">
import { GkGrid } from 'god-kit/vue'
</script>

<template>
  <GkGrid
    :columns="4"
    :columns-tablet="3"
    :columns-mobile="1"
    :gap="3"
    :show-grid-lines="true"
    class="demo-gk-grid"
  >
    <div class="demo-gk-grid__cell">One</div>
    <div class="demo-gk-grid__cell">Two</div>
    <div class="demo-gk-grid__cell">Three</div>
  </GkGrid>
</template>

<style scoped>
.demo-gk-grid__cell {
  min-height: 3rem;
  padding: var(--gk-space-2);
  border-radius: var(--gk-radius-sm);
  background: var(--gk-color-surface-elevated);
  border: 1px solid var(--gk-color-border);
  font-size: var(--gk-font-size-sm);
  color: var(--gk-color-text);
}
</style>

Chrome row

data-gk-grid-chrome marks non-cell rows when show-grid-lines is on.

Preview chrome only

Cell A

Cell B

vue

<script setup lang="ts">
import { GkGrid } from 'god-kit/vue'
</script>

<template>
  <GkGrid :show-grid-lines="true" :columns="2" class="demo-gk-grid">
    <span
      data-gk-grid-chrome
      style="grid-column: 1 / -1"
      class="demo-gk-grid__chrome"
    >Preview chrome only</span>
    <div class="demo-gk-grid__cell">Cell A</div>
    <div class="demo-gk-grid__cell">Cell B</div>
  </GkGrid>
</template>

<style scoped>
.demo-gk-grid__chrome {
  font-size: var(--gk-font-size-sm);
  color: var(--gk-color-text-muted);
}

.demo-gk-grid__cell {
  min-height: 3rem;
  padding: var(--gk-space-2);
  border-radius: var(--gk-radius-sm);
  background: var(--gk-color-surface-elevated);
  border: 1px solid var(--gk-color-border);
  font-size: var(--gk-font-size-sm);
  color: var(--gk-color-text);
}
</style>

API

Props

Prop	Type	Default	Description
tag	string	'div'	Root element (section for landmarks, div for generic wrappers)
columns	1–4	3	Column count from 64rem up (desktop)
columnsTablet	1–4	same as columns	Column count from 48rem to below 64rem
columnsMobile	1–4	same as columnsTablet ?? columns	Column count below 48rem
gap	1–6	4	Spacing token step (maps to --gk-space-*)
showGridLines	boolean	false	Dashed outline on each direct child; omit chrome with data-gk-grid-chrome on a child
alignItems	'stretch' | 'start' | 'center' | 'end'	'stretch'	Grid align-items
justifyItems	'stretch' | 'start' | 'center' | 'end'	'stretch'	Grid justify-items
textAlign	'start' | 'center' | 'end'	'start'	text-align for cell content

Slots

Slot	Description
default	Cell content (any block-level or inline children)

Examples

Each scenario under Live Examples includes a copyable Vue snippet (source is imported from the same SFC as the preview).

Accessibility notes

• Use tag="section" (or wrap in a sectioning element) when the grid represents a major region; provide a heading inside or aria-label on the section when it has no visible title.
• Keep DOM order aligned with visual order on all breakpoints; media queries only change grid-template-columns, not content order.
• For showGridLines, do not rely on outlines alone to convey state; they are a visual aid, not a replacement for clear content structure.

Related components

• GkStack
• GkContainer
• GkDivider
• GkDataTable — for tabular, sortable data, not page layout grids