t-grid

A group of layout components to display and organize components. By default these components' css classes are disabled in order to keep bundle size as small as possible. This is because UnoCSS does not support dynamic class names and we don't want to generate all classes for all breakpoints when they are not actually needed.

To solve this, you can define the properties you want to be generated in your css.config.ts file.

// css.config.ts

import { createUnocssConfig } from "@dija/tohama-vite";

export default createUnocssConfig({
  generator: {
    grid: {
      cols: ["6"],
      gap: ["2"],
      breakpoints: ["re"],
    },
  },
});

Basic Usage

<TGrid cols="3">
  <TGridCol />
  <TGridCol />
  <TGridCol />
  ...
</TGrid>

Gap

<TGrid cols="3" gap="2">
  <TGridCol />
  <TGridCol />
  <TGridCol />
  ...
</TGrid>

Span

<TGrid cols="6" gap="1">
  <TGridCol />
  <TGridCol />
  <TGridCol />
  <TGridCol span="3" />
  <TGridCol />
  <TGridCol span="4" />
  <TGridCol />
  <TGridCol span="6" />
</TGrid>

Responsive Layout

<TGrid cols="1" colsMd="3" gap="2" gapMd="4">
  <TGridCol />
  <TGridCol spanMd="2" />
</TGrid>

t-grid API

No options available

t-grid-col API

No options available