CSS Grid is a layout block for the grids the core Grid block can't build. Columns can have different widths, such as 2fr 1fr 240px, and each Grid Item inside it can start on a chosen column or row, span several, and change its order. Every layout setting can differ between desktop, tablet, and mobile.

Use the core Group block's Grid layout for simple equal-width grids. Reach for CSS Grid when a design needs unequal tracks, a card that spans two rows, or items placed in exact positions.

Add a CSS Grid

Open the block inserter, switch to the Axiom Blocks category, and click CSS Grid. It arrives with three Grid Items, each holding a paragraph you can replace with any blocks: headings, images, buttons, or other Axiom blocks.

A new grid starts at 3 equal columns on desktop, 2 on tablet, and 1 on mobile. To add another cell, select the grid and click the + appender, which inserts a new Grid Item.

Choose how columns are built

The Layout panel in Settings has a Mode with three options:

  • Equal columns sets a number of columns, from 1 to 12, all the same width.
  • Auto fit fits as many columns as the space allows, each at least the Minimum column width you enter (for example 240px).
  • Custom tracks takes a list of column widths separated by spaces, such as 2fr 1fr 1fr or 280px 1fr.

What custom tracks accept

Custom tracks accept up to 12 values. Each value is a number with one of these units: fr, px, rem, em, %, vw, or vh. The words auto, min-content, and max-content, and plain 0, also work.

Rows, flow, and dense packing

The Tracks panel controls everything beyond the columns:

  • Row tracks sets explicit row heights with the same values as custom columns, for example 120px auto.
  • Auto column size and Auto row size set the size of any extra columns or rows the grid creates on its own.
  • Auto flow fills the grid row by row (the default) or column by column.
  • Dense packing lets later items move up into gaps left by larger items earlier in the grid.

Alignment

The Alignment panel holds four controls:

  • Justify items and Align items position every item inside its cell horizontally and vertically.
  • Justify content and Align content position the whole grid inside the block when the tracks don't fill it, for example with fixed px columns.

Each Grid Item can override this for itself with Justify self and Align self.

Place items with Grid Item

Select a Grid Item to open its Placement panel:

  • Column start and Row start put the item on a specific line. Leave them at 0 to let the grid place the item automatically.
  • Column span and Row span make the item cover several columns or rows.
  • Order moves the item earlier or later without changing its place in the editor's block list.

Responsive settings

Every layout and placement control has a device switcher. Pick Tablet or Mobile and change the value for that device only. A device you haven't changed uses the next larger device's value. Tablet styles apply at 780px and below, and mobile styles at 360px and below.

When a device ends up with a single column, every item stacks full width in order. Column start and column span are ignored there, so a span set for desktop never adds an extra column on a phone. Row spans still apply, so set Row span back to 1 on tablet or mobile if a tall desktop card shouldn't stay tall when stacked.

Style the grid and its items

The Styles tab on CSS Grid has these panels:

  • Grid for background, border, radius, and shadow on the grid itself.
  • Gap for the column gap and row gap, which can also differ per device.
  • Spacing for padding and margin.

Each Grid Item has its own Item panel with background, border, radius, shadow, and a minimum height, plus Spacing. This is how you turn the cells into cards without wrapping their content in another block.

Turn the block off

CSS Grid has one switch in Axiom Blocks → Block Manager. Turning it off disables Grid Item as well: grids already on your pages stop rendering on the frontend, and the editor shows a notice in their place. Turn it back on and they return unchanged.

CSS Grid and Grid Item were added in Axiom Blocks 1.0.9. See the Axiom Blocks changelog for the complete release notes.