Appearance

Grid ​

CSS Grid named template areas. Set grid-template-areas and grid-area via utility classes.

Browser support

Plain grid-template-areas and grid-area. No relative color syntax, no @property registrations, nothing modern at all. These utilities work wherever Tailwind itself does.

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-<number> 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 ​

grid-template-areas takes a multi-part string value, so this utility uses arbitrary value syntax ([...]) as its main interface:

  • Underscores become spaces, so header_header is header header
  • Single quotes delimit a row, so 'header_header' is one row
  • Underscores separate the quoted rows from each other
  • A . marks an empty cell

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 shorthand for grid-area-[var(--hero-area)]. It adds the var() wrapper for you.

Import ​

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

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

This entry carries none of the library's color machinery, because these utilities read no color. Taking it costs you nothing but the two utilities below. See take only what you need.