jbaubree / unocss-preset-grid

UnoCSS Grid preset

Grid Preset for UnoCSS

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

---

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>
}