Boostrap 5-like grid system fully compatible with UnoCSS breakpoint system
# Using npm
npm install unocss-preset-grid
# Using yarn
yarn add unocss-preset-grid
# Using pnpm
pnpm add unocss-preset-grid
// 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
- .container
- .container-fluid
- .row
- .col
- .col-(1-12)
- .col-auto
- .col-fill
- .offset-(1-12)
- .g(x|y)-*
export interface GridOptions {
prefix?: string
piece?: string
gutter?: string
columns?: number
breakpoints?: Record<string, string>
}