Grid

The Grid component provides a powerful 12-column grid layout system using CSS Grid. It supports responsive breakpoints, container queries for relative sizing, and flexible spacing options. Perfect for creating complex, responsive layouts.

Basic grid

The Grid component creates a 12-column grid layout. Grid items span all 12 columns by default.

Item 1

Item 2

Item 3

Source code

<template>
  <IkGrid class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default);">
    <IkGridItem class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 1</IkGridItem>
    <IkGridItem class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 2</IkGridItem>
    <IkGridItem class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 3</IkGridItem>
  </IkGrid>
</template>
<script setup>
import { IkGrid } from '@ikol/ui-kit/components/IkGrid';
import { IkGridItem } from '@ikol/ui-kit/components/IkGrid';
</script>

Column spans

Control how many columns each grid item spans using the xxs prop (or other breakpoint props) on IkGridItem, where the value is 1-12.

12 columns

6 columns

4 columns

3 columns

Source code

<template>
  <IkGrid class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default);">
    <IkGridItem xxs="12" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">12 columns</IkGridItem>
    <IkGridItem xxs="6" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">6 columns</IkGridItem>
    <IkGridItem xxs="6" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">6 columns</IkGridItem>
    <IkGridItem xxs="4" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">4 columns</IkGridItem>
    <IkGridItem xxs="4" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">4 columns</IkGridItem>
    <IkGridItem xxs="4" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">4 columns</IkGridItem>
    <IkGridItem xxs="3" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">3 columns</IkGridItem>
    <IkGridItem xxs="3" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">3 columns</IkGridItem>
    <IkGridItem xxs="3" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">3 columns</IkGridItem>
    <IkGridItem xxs="3" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">3 columns</IkGridItem>
  </IkGrid>
</template>
<script setup>
import { IkGrid } from '@ikol/ui-kit/components/IkGrid';
import { IkGridItem } from '@ikol/ui-kit/components/IkGrid';
</script>

Responsive breakpoints

Use responsive breakpoint props on IkGridItem to control column spans at different screen sizes. Breakpoints: xs (576px), sm (768px), md (992px), lg (1200px), xl (1400px), xxl (2000px).

Responsive Item 1

Responsive Item 2

Responsive Item 3

Responsive Item 4

Source code

<template>
  <IkGrid class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default);">
    <IkGridItem xxs="12" sm="6" md="4" lg="3" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">
      Responsive Item 1
    </IkGridItem>
    <IkGridItem xxs="12" sm="6" md="4" lg="3" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">
      Responsive Item 2
    </IkGridItem>
    <IkGridItem xxs="12" sm="6" md="4" lg="3" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">
      Responsive Item 3
    </IkGridItem>
    <IkGridItem xxs="12" sm="6" md="4" lg="3" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">
      Responsive Item 4
    </IkGridItem>
  </IkGrid>
</template>
<script setup>
import { IkGrid } from '@ikol/ui-kit/components/IkGrid';
import { IkGridItem } from '@ikol/ui-kit/components/IkGrid';
</script>

Spacing

Control the gap between grid items using spacing_x for horizontal spacing and spacing_y for vertical spacing. Values range from 0 to 10.

Horizontal spacing

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

Source code

<template>
  <div>
    <IkGrid spacing_x="2" class="ik-pa-4 ik-mb-4" style="border: 1px dashed var(--border-neutral-regular-default);">
      <IkGridItem xxs="4" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 1</IkGridItem>
      <IkGridItem xxs="4" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 2</IkGridItem>
      <IkGridItem xxs="4" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 3</IkGridItem>
    </IkGrid>
    <IkGrid spacing_x="5" class="ik-pa-4 ik-mb-4" style="border: 1px dashed var(--border-neutral-regular-default);">
      <IkGridItem xxs="4" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 1</IkGridItem>
      <IkGridItem xxs="4" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 2</IkGridItem>
      <IkGridItem xxs="4" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 3</IkGridItem>
    </IkGrid>
    <IkGrid spacing_x="8" class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default);">
      <IkGridItem xxs="4" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 1</IkGridItem>
      <IkGridItem xxs="4" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 2</IkGridItem>
      <IkGridItem xxs="4" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 3</IkGridItem>
    </IkGrid>
  </div>
</template>
<script setup>
import { IkGrid } from '@ikol/ui-kit/components/IkGrid';
import { IkGridItem } from '@ikol/ui-kit/components/IkGrid';
</script>

Vertical spacing

Item 1

Item 2

Item 3

Item 4

Source code

<template>
  <IkGrid spacing_y="4" class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default);">
    <IkGridItem xxs="6" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 1</IkGridItem>
    <IkGridItem xxs="6" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 2</IkGridItem>
    <IkGridItem xxs="6" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 3</IkGridItem>
    <IkGridItem xxs="6" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 4</IkGridItem>
  </IkGrid>
</template>
<script setup>
import { IkGrid } from '@ikol/ui-kit/components/IkGrid';
import { IkGridItem } from '@ikol/ui-kit/components/IkGrid';
</script>

Combined spacing

Use both spacing_x and spacing_y together.

Item 1

Item 2

Item 3

Item 4

Source code

<template>
  <IkGrid spacing_x="5" spacing_y="3" class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default);">
    <IkGridItem xxs="6" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 1</IkGridItem>
    <IkGridItem xxs="6" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 2</IkGridItem>
    <IkGridItem xxs="6" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 3</IkGridItem>
    <IkGridItem xxs="6" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">Item 4</IkGridItem>
  </IkGrid>
</template>
<script setup>
import { IkGrid } from '@ikol/ui-kit/components/IkGrid';
import { IkGridItem } from '@ikol/ui-kit/components/IkGrid';
</script>

Relative grid with CSS container queries

Use the relative prop to enable container-based responsive breakpoints. This uses CSS container queries instead of viewport media queries, making the grid responsive to its container size rather than the viewport.

When using relative, you must provide breakpoint values via props (xs, sm, md, lg) which define the minimum container widths for each breakpoint.

Item 1

Item 2

Item 3

Item 4

Resize this container to see container-based responsive behavior

Source code

<template>
  <div style="resize: both; overflow: auto; border: 2px solid var(--border-neutral-regular-default); padding: 16px; min-width: 200px; min-height: 200px;">
    <IkGrid relative :xs="300" :sm="500" :md="700" :lg="900" spacing_x="3" class="ik-pa-4" style="border: 1px dashed var(--border-neutral-regular-default);">
      <IkGridItem xxs="12" xs="6" sm="4" md="3" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">
        Item 1
      </IkGridItem>
      <IkGridItem xxs="12" xs="6" sm="4" md="3" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">
        Item 2
      </IkGridItem>
      <IkGridItem xxs="12" xs="6" sm="4" md="3" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">
        Item 3
      </IkGridItem>
      <IkGridItem xxs="12" xs="6" sm="4" md="3" class="ik-pa-4" style="background: var(--bg-primary-regular-default); border: 1px solid var(--border-neutral-regular-default);">
        Item 4
      </IkGridItem>
    </IkGrid>
    <p class="ik-text--sm ik-text--default-light ik-mt-2">Resize this container to see container-based responsive behavior</p>
  </div>
</template>
<script setup>
import { IkGrid } from '@ikol/ui-kit/components/IkGrid';
import { IkGridItem } from '@ikol/ui-kit/components/IkGrid';
</script>