Grid Areas Preset for UnoCSS

A plugin to provide UnoCSS CSS utilities for named grid areas.

--- ## Install ```sh # Using npm npm install unocss-preset-grid-areas --save-dev # Using yarn yarn add unocss-preset-grid-areas -D # Using pnpm pnpm add unocss-preset-grid-areas -D ``` ## Usage Import plugin in your unocss.config.(js|ts) file, and define your template areas, along with any row/column specifications: ```js // unocss.config.(js|ts) import { defineConfig } from 'unocss' import { presetGridAreas } from 'unocss-preset-grid-areas' export default defineConfig({ presets: [ presetUno(), // ... presetGridAreas({ gridTemplateAreas: { 'layout': [ 'header header header', 'nav main main', 'nav footer footer', ], }, }) ] }) ``` **This will generate the following utilities:** ```plain grid-areas-layout grid-in-footer grid-in-header grid-in-main grid-in-nav col-start-footer col-start-header col-start-main col-start-nav col-end-footer col-end-header col-end-main col-end-nav row-start-footer row-start-header row-start-main row-start-nav row-end-footer row-end-header row-end-main row-end-nav ``` ```html

``` > **Note** > If used with UnoPreset or other similar preset, call `presetGridAreas()` at the bottom ## CSS Globals and Keywords * .grid-areas-none * .grid-areas-inherit * .grid-areas-initial * .grid-areas-revert * .grid-areas-revert-layer * .grid-areas-unset * .grid-in-auto * .grid-in-inherit * .grid-in-initial * .grid-in-revert * .grid-in-revert-layer * .grid-in-unset ## Type of `GridOptions` ```ts export interface GridOptions { gridTemplateAreas: { [key: string]: string[]; }; } ``` ## Arbitrary Values Currently partial supported. But PR welcome :)