Grid

A grid container laying its children out in a fixed number of columns.

Source

ATRI

Sci-fi

Sakura no Uta

Drama

Afternoon at the Observatory

Slice of life

The Other Side of the Galaxy

Sci-fi

Between the Pages

School

A Quiet Signal

Healing

<script setup lang="ts">
  import { AspectRatio, Card, Grid, Stack, Tag, Text } from '@hina-ui/vue'

  const works = [
    { title: 'ATRI', tag: 'Sci-fi' },
    { title: 'Sakura no Uta', tag: 'Drama' },
    { title: 'Afternoon at the Observatory', tag: 'Slice of life' },
    { title: 'The Other Side of the Galaxy', tag: 'Sci-fi' },
    { title: 'Between the Pages', tag: 'School' },
    { title: 'A Quiet Signal', tag: 'Healing' },
  ]
</script>

<template>
  <Grid :cols="3" class="w-full max-w-2xl">
    <Card v-for="work in works" :key="work.title">
      <Stack gap="xs" align="start">
        <AspectRatio class="bg-inset w-full rounded-md" />
        <Text class="font-medium">{{ work.title }}</Text>
        <Tag>{{ work.tag }}</Tag>
      </Stack>
    </Card>
  </Grid>
</template>

vue

Usage

import { Grid } from '@hina-ui/vue'

cols is the number of columns, from 1 to 12. Children fill the cells in order and move to the next row once one is full.

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

<template>
  <Grid :cols="3" class="w-full max-w-md">
    <Card v-for="i in 6" :key="i" class="bg-inset grid h-16 place-items-center" :padded="false">
      {{ i }}
    </Card>
  </Grid>
</template>

vue

Examples

Columns

cols 2

cols 3

cols 4

cols 6

<script setup lang="ts">
  import { Card, Grid, Stack, Text } from '@hina-ui/vue'

  const counts = [2, 3, 4, 6] as const
</script>

<template>
  <Stack class="w-full max-w-md">
    <Stack v-for="cols in counts" :key="cols" gap="xs">
      <Text tone="muted" size="sm">cols {{ cols }}</Text>
      <Grid :cols="cols" gap="sm">
        <Card
          v-for="i in cols"
          :key="i"
          class="bg-inset grid h-10 place-items-center text-sm"
          :padded="false"
        >
          {{ i }}
        </Card>
      </Grid>
    </Stack>
  </Stack>
</template>

vue

Gap

gap takes steps rather than arbitrary values. The default md differs by axis: --hn-inline-gap between columns and --hn-stack-gap between rows, which is 12 and 16 pixels at the regular density. The other steps are the same on both axes: 0, 4, 8, 24 and 32 pixels.

At md: 12 pixels between columns, 16 between rows

Every other step is the same on both axes, here lg at 24

<script setup lang="ts">
  import { Card, Grid, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Stack class="w-full max-w-md">
    <Stack gap="xs">
      <Text tone="muted" size="sm">At md: 12 pixels between columns, 16 between rows</Text>
      <Grid :cols="3" gap="md">
        <Card v-for="i in 6" :key="i" class="bg-inset h-10" :padded="false" />
      </Grid>
    </Stack>
    <Stack gap="xs">
      <Text tone="muted" size="sm">Every other step is the same on both axes, here lg at 24</Text>
      <Grid :cols="3" gap="lg">
        <Card v-for="i in 6" :key="i" class="bg-inset h-10" :padded="false" />
      </Grid>
    </Stack>
  </Stack>
</template>

vue

Spanning columns

To have a child cover several columns, put Tailwind’s col-span-* on the child. Grid has no column component of its own.

col-span-2

col-span-3

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

<template>
  <Grid :cols="3" class="w-full max-w-md">
    <Card class="bg-inset col-span-2 grid h-16 place-items-center text-sm" :padded="false">
      col-span-2
    </Card>
    <Card class="bg-inset grid h-16 place-items-center text-sm" :padded="false">1</Card>
    <Card class="bg-inset col-span-3 grid h-16 place-items-center text-sm" :padded="false">
      col-span-3
    </Card>
  </Grid>
</template>

vue

Following breakpoints

When the column count differs between breakpoints, override it with Tailwind classes such as sm:grid-cols-4. The cols prop itself does not take responsive objects.

Two columns on a narrow screen, four on a wide one

<script setup lang="ts">
  import { Card, Grid, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Stack gap="sm" class="w-full max-w-2xl">
    <Text tone="muted" size="sm">Two columns on a narrow screen, four on a wide one</Text>
    <Grid :cols="2" class="sm:grid-cols-4">
      <Card v-for="i in 8" :key="i" class="bg-inset h-12" :padded="false" />
    </Grid>
  </Stack>
</template>

vue

API

Prop	Type	Default	Description
`cols`	`1` to `12`	`1`	Number of columns
`gap`	`'none' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Space between cells
`as`	`string`	`'div'`	The rendered tag
`class`	`string`	—	Classes appended to the container

Slot	Description
`default`	The children