Layout

Grid

CSS grid with two modes: a fixed/responsive column count, or intrinsic auto-fit via minItemWidth. Breakpoints resolve in pure CSS — there is no media-query JS.

plain markup — no library on the page

rendered by aura-react

rendered by aura-vue

rendered by aura-svelte

built from aura-angular's own class helpers

Cell 1

Cell 2

Cell 3

Cell 4

Cell 1

Cell 2

Cell 3

Cell 4

Cell 1

Cell 2

Cell 3

Cell 4

Cell 1

Cell 2

Cell 3

Cell 4

Cell 1

Cell 2

Cell 3

Cell 4

Code

index.html

<div class="aura-grid" style="--aura-gap:var(--space-4);--cols-base:1;--cols-md:2;--cols-lg:4;width:100%;">
  <div class="aura-card">
    <p class="aura-text aura-text--body" style="">Cell 1</p>
  </div>
  <div class="aura-card">
    <p class="aura-text aura-text--body" style="">Cell 2</p>
  </div>
  <div class="aura-card">
    <p class="aura-text aura-text--body" style="">Cell 3</p>
  </div>
  <div class="aura-card">
    <p class="aura-text aura-text--body" style="">Cell 4</p>
  </div>
</div>

Demo.tsx

import { Card, Grid, Typography } from '@ilomee/aura-react';

export default function Demo() {
  // Breakpoints resolve in pure CSS — there is no media-query JavaScript.
  return (
    <Grid cols={{ base: 1, md: 2, lg: 4 }} style={{ width: '100%' }}>
      {Array.from({ length: 4 }, (_, i) => (
        <Card key={i}>
          <Typography variant="body">Cell {i + 1}</Typography>
        </Card>
      ))}
    </Grid>
  );
}

Demo.vue

<script setup lang="ts">
import { Grid, Card } from '@ilomee/aura-vue';
</script>

<template>
  <Grid :cols="{ base: 1, md: 2, lg: 3 }">
    <Card v-for="item in items" :key="item.id">{{ item.name }}</Card>
  </Grid>
</template>

Demo.svelte

<script lang="ts">
  import { Grid, Card } from '@ilomee/aura-svelte';
</script>

<Grid cols={{ base: 1, md: 2, lg: 3 }}>
  {#each items as item (item.id)}
    <Card>{item.name}</Card>
  {/each}
</Grid>

Used as [auraGrid] — a directive you put on your own element.

demo.component.ts

import { AuraGrid, AuraCard } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraGrid, AuraCard],
  template: `
    <div auraGrid [cols]="{ base: 1, md: 2, lg: 3 }">
      @for (item of items; track item.id) {
        <div auraCard>{{ item.name }}</div>
      }
    </div>
  `,
})
export class DemoComponent {
  items = [];
}

A directive — you choose the element, so there is no as input.

Props

Plain markup has no props — the classes below are the whole API. The four packages do nothing more than set these same classes for you.

Name	Type	Default	Notes
as	`ElementType`	`'div'`	Rendered element.
cols	`number \| { base?: number; md?: number; lg?: number }`	—	Fixed or per-breakpoint column count.
gap	`number \| string`	`4`	Space-scale step (`4` → `var(--space-4)`) or a raw CSS length.
minItemWidth	`string`	—	Intrinsic mode — auto-fit columns of at least this width. Overrides `cols`.

Name	Type	Default	Notes
as	`string`	`'div'`	Rendered element.
cols	`number \| { base?: number; md?: number; lg?: number }`	—	Fixed or per-breakpoint column count.
gap	`number \| string`	`4`	Space-scale step (`4` → `var(--space-4)`) or a raw CSS length.
minItemWidth	`string`	—	Intrinsic mode — auto-fit columns of at least this width. Overrides `cols`.

Name	Type	Default	Notes
as	`string`	`'div'`	Rendered element.
cols	`number \| { base?: number; md?: number; lg?: number }`	—	Fixed or per-breakpoint column count.
gap	`number \| string`	`4`	Space-scale step (`4` → `var(--space-4)`) or a raw CSS length.
minItemWidth	`string`	—	Intrinsic mode — auto-fit columns of at least this width. Overrides `cols`.

Name	Type	Default	Notes
cols	`number \| { base?: number; md?: number; lg?: number }`	—	Fixed or per-breakpoint column count.
gap	`number \| string`	`4`	Space-scale step (`4` → `var(--space-4)`) or a raw CSS length.
minItemWidth	`string`	—	Intrinsic mode — auto-fit columns of at least this width. Overrides `cols`.

Emitted classes

Every framework emits the same classes — that is what makes the four libraries look identical. You can use them directly, without any component library.

Class	Role	Notes
.aura-grid	base	Required. A modifier does nothing without it.
.aura-grid--auto	modifier

Tokens and rules

components.css

columns: var(--cols-base) · var(--cols-md) · var(--cols-lg)
gap: var(--aura-gap, var(--space-4))
auto: repeat(auto-fit, minmax(var(--aura-min, 240px), 1fr))
breakpoints: 768px · 1024px