@choice-ui/grid-areas weekly downloads statistics

@choice-ui/grid-areas

A Tailwind CSS v4 plugin for CSS Grid named areas.

Installation

npm install @choice-ui/grid-areas
# or
pnpm add @choice-ui/grid-areas

Usage

In your tailwind.css:

@import "tailwindcss";
@plugin "@choice-ui/grid-areas";

Then use in HTML:

<!-- Define grid template areas (use _ for spaces, , for row separators) -->
<div class="grid-areas-[header_header,sidebar_main,footer_footer] grid-rows-[auto_1fr_auto] grid-cols-[200px_1fr]">
  <!-- Place elements in named areas -->
  <header class="grid-area-[header]">Header</header>
  <aside class="grid-area-[sidebar]">Sidebar</aside>
  <main class="grid-area-[main]">Main</main>
  <footer class="grid-area-[footer]">Footer</footer>
</div>

Utilities

Class	CSS Property	Description
grid-areas-[...]	grid-template-areas	Define grid template areas
grid-area-[...]	grid-area	Place element in a named area
row-start-[...]	grid-row-start	Row start position
row-end-[...]	grid-row-end	Row end position
col-start-[...]	grid-column-start	Column start position
col-end-[...]	grid-column-end	Column end position

Syntax

• Use _ (underscore) for spaces between area names
• Use , (comma) to separate rows
• Use . for empty cells

Examples

<!-- 3-column layout -->
<div class="grid-areas-[header_header_header,sidebar_main_main,footer_footer_footer]">

<!-- With empty cells -->
<div class="grid-areas-[a_._b,._c_.,d_._e]">

<!-- Responsive -->
<div class="grid-areas-[header,main,footer] md:grid-areas-[header_header,sidebar_main,footer_footer]">

CSS Keywords

Built-in support for CSS keywords:

• grid-areas-none
• grid-areas-inherit
• grid-areas-initial
• grid-areas-revert
• grid-areas-unset
• grid-area-auto

License

MIT