Grid

1<script setup lang="ts">2import { Grid, GridItem } from '@vitral/vue';3import { ref } from 'vue';4 5const lines = ref(true);6</script>7 8<template>9    <label class="toggle"><input v-model="lines" type="checkbox" /> showGridLines</label>10    <Grid class="frame" rows="Auto,*,2*,48" columns="160,*,Auto" :row-spacing="6" :column-spacing="6" :show-grid-lines="lines">11        <GridItem class="box c1" :column-span="3">row 0 · Auto — spans 3 columns</GridItem>12        <GridItem class="box c2" :row="1" :row-span="2">rows 1–2 · column 0 (160px)</GridItem>13        <GridItem class="box c3" :row="1" :column="1">row 1 (*) · column 1 (*)</GridItem>14        <GridItem class="box c4" :row="2" :column="1">row 2 (2*) · column 1</GridItem>15        <GridItem class="box c5" :row="1" :column="2" :row-span="2">column 2 · Auto</GridItem>16        <GridItem class="box c1" :row="3" :column-span="3">row 3 · 48px</GridItem>17    </Grid>18</template>19 20<style scoped>21.toggle {22    display: inline-flex;23    align-items: center;24    gap: 0.375rem;25    width: 100%;26    font-size: 0.8125rem;27}28 29.frame {30    width: 100%;31    height: 20rem;32    padding: 0.5rem;33    border: 1px dashed color-mix(in srgb, var(--vt-text-color) 30%, transparent);34    border-radius: var(--vt-border-radius-md);35}36 37.box {38    --c: var(--vt-chart-1);39    display: flex;40    align-items: center;41    justify-content: center;42    padding: 0.375rem 0.625rem;43    font-size: 0.8125rem;44    text-align: center;45    color: var(--vt-text-color);46    background: color-mix(in srgb, var(--c) 18%, transparent);47    border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);48    border-radius: var(--vt-border-radius-sm);49}50 51.c1 {52    --c: var(--vt-chart-1);53}54.c2 {55    --c: var(--vt-chart-2);56}57.c3 {58    --c: var(--vt-chart-3);59}60.c4 {61    --c: var(--vt-chart-4);62}63.c5 {64    --c: var(--vt-chart-5);65}66</style>

1<script setup lang="ts">2import { Grid, GridItem, InputText } from '@vitral/vue';3</script>4 5<template>6    <Grid class="form" rows="Auto,Auto,Auto" columns="Auto,*" :row-spacing="10" :column-spacing="16">7        <GridItem as="label" for="grid-name" class="label">Name</GridItem>8        <GridItem :column="1"><InputText id="grid-name" fluid placeholder="Ada Lovelace" /></GridItem>9        <GridItem as="label" for="grid-email" :row="1" class="label">Email address</GridItem>10        <GridItem :row="1" :column="1"><InputText id="grid-email" type="email" fluid placeholder="ada@example.com" /></GridItem>11        <GridItem as="label" for="grid-city" :row="2" class="label">City</GridItem>12        <GridItem :row="2" :column="1"><InputText id="grid-city" fluid placeholder="London" /></GridItem>13    </Grid>14</template>15 16<style scoped>17.form {18    width: 100%;19    max-width: 32rem;20    align-items: center;21}22 23.label {24    font-size: 0.8125rem;25    font-weight: 500;26}27</style>