https://github.com/StatuAgency/unocss-preset-grid

UnoCSS Grid preset
https://github.com/StatuAgency/unocss-preset-grid

bootstrap grid layout preset tailwind unocss

Last synced: 16 days ago
JSON representation

UnoCSS Grid preset

• Host: GitHub
• URL: https://github.com/StatuAgency/unocss-preset-grid
• Owner: StatuAgency
• License: mit
• Created: 2023-05-13T19:37:22.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-03-19T16:57:40.000Z (8 months ago)
• Last Synced: 2024-09-27T00:49:25.539Z (about 1 month ago)
• Topics: bootstrap, grid, layout, preset, tailwind, unocss
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/unocss-preset-grid
• Size: 192 KB
• Stars: 18
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-unocss - unocss-preset-grid - Bootstrap 5 Like Grid Preset. (Presets)
• awesome-unocss - unocss-preset-grid - Bootstrap 5 Like Grid Preset. (Presets)

README

        
Grid Preset for UnoCSS



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





  

  

  

  



---

## Install

```sh

# Using npm

npm install unocss-preset-grid

# Using yarn

yarn add unocss-preset-grid

# Using pnpm

pnpm add unocss-preset-grid

```

## Usage

```js

// 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`

```ts

export interface GridOptions {

  prefix?: string

  piece?: string

  gutter?: string

  columns?: number

  breakpoints?: Record

}

```