Skip to content

StatuAgency/unocss-preset-grid

Repository files navigation

Grid Preset for UnoCSS

Boostrap 5-like grid system fully compatible with UnoCSS breakpoint system

Author Versio License Maintained


Install

# Using npm
npm install unocss-preset-grid

# Using yarn
yarn add unocss-preset-grid

# Using pnpm
pnpm add unocss-preset-grid

Usage

// unocss.config.js
import { defineConfig } from 'unocss'
import { presetGrid } from 'unocss-preset-grid'

export default defineConfig({
  presets: [
    presetUno(),
    // ...
    presetGrid()
  ]
})

Note If used with UnoPreset or other similar preset, call presetGrid() at the bottom

Utilities

  • .container
  • .container-fluid
  • .row
  • .col
  • .col-(1-12)
  • .col-auto
  • .col-fill
  • .offset-(1-12)
  • .g(x|y)-*

Type of GridOptions

export interface GridOptions {
  prefix?: string
  piece?: string
  gutter?: string
  columns?: number
  breakpoints?: Record<string, string | number>
}