CSS Grid Layout replaced float-based and flexbox-only grids as the standard tool for two-dimensional page layouts, and WordPress block themes expose enough customisation hooks to use it cleanly without modifying generated markup. The auto-fit and auto-fill keywords combined with minmax() produce fully responsive columns with zero media queries for the most common case. Named grid template areas make single-post and archive layouts self-documenting — the area names describe the visual intent of each section directly in the CSS. WordPress’s theme.json schema accepts a settings.custom block where you can define design tokens that block styles can reference as CSS custom properties. The block editor respects additional CSS classes registered under settings.blocks, letting you expose utility classes to editors without writing JavaScript. A grid with grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) reflows from three columns to one naturally as the viewport narrows. Adding gap instead of margin on grid children prevents the double-margin problem that plagued float layouts and works correctly in all modern browsers. For sidebar layouts, switching from a fixed pixel width to a fluid column with clamp() keeps the sidebar usable across a wider range of viewport sizes. The CSS custom properties guide explains how to wire :root variables to theme.json tokens. Content-width constraints set in theme.json under settings.layout.contentSize interact with grid definitions, so test at both narrow and wide viewports after adding grid rules. The block theme guide shows how to register templateParts that consume these grid classes directly in the HTML templates. Shipping grid utility classes in the theme stylesheet rather than inline block styles keeps the CSS cache-friendly and easy to update across the entire site from one place.
Problem: WordPress block themes lack reusable CSS grid utilities for post archives and page layouts, forcing developers to repeat identical grid declarations across multiple templates.
Solution: Add grid utility classes to the theme style.css and expose them to the block editor via the settings.custom section of theme.json so both developers and editors can apply them consistently.
/* Auto-fit grid — reflows columns without media queries */
.grid-auto {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}
/* Fixed 3-column grid with single-column mobile fallback */
.grid-3col {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
@media (max-width: 768px) {
.grid-3col {
grid-template-columns: 1fr;
}
}
/* Named areas for WordPress single-post layout */
.post-layout {
display: grid;
grid-template-areas:
"header header"
"content sidebar"
"footer footer";
grid-template-columns: 1fr 300px;
gap: 2rem;
}
.post-layout > header { grid-area: header; }
.post-layout > main { grid-area: content; }
.post-layout > aside { grid-area: sidebar; }
.post-layout > footer { grid-area: footer; }
@media (max-width: 960px) {
.post-layout {
grid-template-areas: "header" "content" "sidebar" "footer";
grid-template-columns: 1fr;
}
}NOTE: Register the class names in theme.json under settings.custom.layoutClasses so the block editor can surface them as options in the Advanced panel — without registration, editors must type the class name manually in the Additional CSS Class field.