Grid System

The grid is configured through the local tailwind-helper in tailwind.config.ts. Current projects use Tailwind v3, so this config file is still the source of truth for breakpoints, gutters, margins, and generated grid utilities.

Configuration

responsiveTheme({
  screens: { sm: 600, md: 900, lg: 1200, xl: 1600, xxl: 2000 },
  breakpoints: ["lg"],
  interpolate: {
    sm: {},
    md: { base: "sm", lerp: true },
    lg: { base: "lg", lerp: true },
    xl: { base: "lg", lerp: true },
    xxl: { base: "lg" },
  },
  grid: {
    BASE: {
      container: "100vw",
      gutter: "16px",
      margin: "16px",
    },
    EDITOR: {
      container: "var(--vw100)",
      gutter: "16px",
      margin: "16px",
    },
    md: {
      container: "100vw",
      gutter: "24px",
      margin: "24px",
    },
    lg: {
      container: "100vw",
      gutter: "2vw",
      margin: "2vw",
    },
    xxl: {
      container: "2000px",
      gutter: "32px",
      margin: "32px",
    },
  },
})

BASE is the normal mobile value. EDITOR is applied inside the WordPress admin, where viewport sizing can differ from the frontend. Other keys map to the configured Tailwind screens.

The helper writes CSS variables such as --tw-grid-container, --tw-grid-margin, --tw-grid-gutter, and --tw-grid-col-width. Tailwind classes are then built on top of those variables.

Layout Classes

Use grid-auto for the standard 12-column site grid.

<section className="grid-auto py-grid-margin">
  <div className="col-span-12 md:col-span-8">
    <h1 className="type-title-xl">Page title</h1>
  </div>
  <aside className="col-span-12 md:col-span-4">
    ...
  </aside>
</section>

Common helper classes:

Spacing keys are also exposed, so layout code can use w-grid, px-grid-margin, gap-grid-gutter, and pb-grid-margin-full.

Column Widths

The helper adds fixed column size utilities from the current grid variables:

<div className="w-grid mx-auto">
  <div className="w-cols-6">Six-column width</div>
  <div className="w-col">One-column width</div>
</div>

These widths are useful for cards, media blocks, and controls that need to align to the same rhythm as the grid without becoming grid children.

Blocks And Admin

Blocks often need separate frontend and editor layout classes. Use normal className for the frontend and adminClassName where eddev block helpers provide it.

<InnerBlocks
  className="grid-auto gap-y-grid-gutter"
  adminClassName="grid col-span-12 gap-grid-gutter"
  allowedBlocks={["content/card-grid-item"]}
/>

Keep full-width blocks responsible for their outer background, then place content on the grid inside the block.