Grid

Usage

The Grid block lays out cards in rows, like a set of services, features, or linked image tiles. You could approximate this with core Columns, but Grid rearranges cards automatically to fit smaller screens.

The Grid holds Card blocks. New grids start with image cards, and you can add, remove, or change card types. Most grids use one card type throughout, but you can mix them.

Parent and child blocks

Select Grid for layout, styling, and link behavior that applies to all cards. Select an individual Card to edit its media, headline, description, and link URL.

Click the inserter prompt after the last card to add more. Use the parent block button, breadcrumb path, or List View to jump between grid and card.

Columns and responsive layout

Columns sets the most cards per row (1–7 on desktop). Extra cards wrap to the next row, and the grid drops to fewer columns on smaller screens on its own.

Match Height equalizes card height when content lengths vary.

Card types

Change a card's type from the child sidebar, or use Quick-Set Card Type on the parent to convert all cards at once:

• Image (default) — photo at the top; crop controlled by parent Image Aspect Ratio
• Icon — image icon instead of a photo; Icon Size and icon color settings on the parent
• Emoji — emoji character instead of a photo or uploaded icon
• Text — headline and copy only, no top media
• Video — hosted video at the top (autoplay, loop, muted)
• YouTube — an embedded YouTube video; paste the video ID in the card sidebar (the part after v= in the YouTube URL)

Links (parent)

• Link Style — Button, Understated, Tab, Minimal, Prominent, or Bold for the bottom CTA
• Link Arrow — character shown beside link text (default →)
• Image Links — make the card image clickable
• Title Links — make the headline clickable
• Hide Button — hide the bottom link when image or title linking is enough

Set each card's URL in the child sidebar or toolbar when the card is selected. Link text defaults to "Learn More" and is editable inline.

Appearance (parent)

• Card Background — fill behind each card, with Background Color and Text Color (dark or light)
• Card Shadow — optional depth with Shadow Weight and Shadow Size
• Small Text — reduces body copy size (not the headline); also toggled from the block toolbar
• Image Aspect Ratio — Default, None, or fixed ratios (1:1, 4:3, 16:9, 9:16, etc.)
• Corners — Sharp, Rounded, or Full on card media
• Grid Gap, Content Spacing, Media Spacing — space between cards and inside cards

Headlines (parent)

• Headline Tag — the heading level card titles use in the page outline (H2–H6, or plain paragraph)
• Headline Appearance — how card titles look, using your Customizer text styles

Icons (parent)

For icon and emoji cards:

• Icon Size, Icon Background (colored circle), Color Icons, and Icon Color

Block toolbar (parent)

• Alignment — text alignment within cards
• Toggle Background — card background on/off
• Toggle Text Size — normal vs small body text

Card content (child)

Each card supports a headline, description (paragraphs/lists), optional media (image, icon, emoji, video, or YouTube), and a link. Click media in the editor to replace it.

Block width

Grid supports Wide and Full alignment.

Tips

• Three or four columns suits most grids.
• Turn on Image Links or Title Links with Hide Button for cleaner cards that are still clickable.