Grid

Recipes

row.config.ts

import { defineComponent } from '../packages/varia/src/index.js'

export default defineComponent('row', {
  base: 'flex flex-wrap mx-[calc(var(--row-gx,0)/-2)]',
  variants: {
    gx: {
      0: '[--row-gx:0]',
      1: '[--row-gx:0.25rem]',
      2: '[--row-gx:0.5rem]',
      3: '[--row-gx:1rem]',
      4: '[--row-gx:1.5rem]',
      5: '[--row-gx:3rem]',
    },
    gy: {
      0: 'gap-y-0',
      1: 'gap-y-1',
      2: 'gap-y-2',
      3: 'gap-y-4',
      4: 'gap-y-6',
      5: 'gap-y-12',
    },
    g: {
      0: '[--row-gx:0] gap-y-0',
      1: '[--row-gx:0.25rem] gap-y-1',
      2: '[--row-gx:0.5rem] gap-y-2',
      3: '[--row-gx:1rem] gap-y-4',
      4: '[--row-gx:1.5rem] gap-y-6',
      5: '[--row-gx:3rem] gap-y-12',
    },
  },
})

col.config.ts

import { defineComponent } from '../packages/varia/src/index.js'

export default defineComponent('col', {
  base: 'flex-1 px-[calc(var(--row-gx,0)/2)]',
  variants: {
    span: {
      auto: 'flex-none w-auto',
      1: 'flex-none w-1/12',
      2: 'flex-none w-2/12',
      3: 'flex-none w-3/12',
      4: 'flex-none w-4/12',
      5: 'flex-none w-5/12',
      6: 'flex-none w-6/12',
      7: 'flex-none w-7/12',
      8: 'flex-none w-8/12',
      9: 'flex-none w-9/12',
      10: 'flex-none w-10/12',
      11: 'flex-none w-11/12',
      12: 'flex-none w-full',
    },
    offset: {
      0: 'ml-0',
      1: 'ml-[calc(100%*1/12)]',
      2: 'ml-[calc(100%*2/12)]',
      3: 'ml-[calc(100%*3/12)]',
      4: 'ml-[calc(100%*4/12)]',
      5: 'ml-[calc(100%*5/12)]',
      6: 'ml-[calc(100%*6/12)]',
      7: 'ml-[calc(100%*7/12)]',
      8: 'ml-[calc(100%*8/12)]',
      9: 'ml-[calc(100%*9/12)]',
      10: 'ml-[calc(100%*10/12)]',
      11: 'ml-[calc(100%*11/12)]',
    },
    order: {
      first: 'order-first',
      last: 'order-last',
      0: 'order-0',
      1: 'order-1',
      2: 'order-2',
      3: 'order-3',
      4: 'order-4',
      5: 'order-5',
    },
  },
})

Usage

A

B

C

span 8

span 4

span 4, offset 2

span 4

first in source, last visually

B

C