Grid

Utilities for CSS Grid named template areas. TailwindCSS v4 provides grid-cols-* and grid-rows-* but doesn't expose grid-template-areas — this module adds that.

Import

Included in @import 'tw-jib-css'. To import individually:

@import 'tw-jib-css/grid';

Quick Reference

Class	Styles
grid-template-areas-[<value>]	grid-template-areas: <value>
grid-area-<integer>	grid-area: <integer>
grid-area-[<value>]	grid-area: <value>

Basic Usage

Defining template areas

Use grid-template-areas-[...] with arbitrary value syntax to define named grid areas. Use underscores for spaces and single quotes to delimit each row:

header

sidebar

main

footer

Holy grail layout

header

nav

main

aside

footer

Integer Grid Areas

Use grid-area-{n} to set a numeric grid area, useful for placing items by line number rather than named areas:

grid-area-1

grid-area-2

grid-area-3

Using a custom value

Since grid-template-areas requires complex string values, this utility uses arbitrary value syntax ([...]) as the primary interface:

• Underscores become spaces: header_header becomes header header
• Single quotes delimit rows: 'header_header' defines one row
• Multiple rows — separate with underscores between quoted groups
• Empty cells — use . (dot) to define empty areas

Use grid-area-[<value>] for spanning or complex placement:

grid-area-[span_2/span_2]

auto

auto

Empty cells

header

main

footer

Using a custom variable

For CSS variables, you can also use the grid-area-(--custom-property) syntax:

grid-area-(--hero-area)

auto

This is just a shorthand for grid-area-[var(--hero-area)] that adds the var() function for you automatically.