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 (choose Original to show whole images). An Image or Video card with nothing chosen shows no empty image space on the site, so it looks like a Text card; in a row with image cards its headline then sits higher. The editor keeps the empty space so you can click it to add one.
• Icon — an icon instead of a photo; Icon Size and icon color settings on the parent. Choose Icon opens the icon library (see Choosing icons); Upload Custom Icon uses your own image from the Media Library
• 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). Visitors can stop it with the small Pause button in the video's corner, which shows when they point at the video or tab to it (always on touch screens); pausing one pauses every background video on the page for the rest of their visit
• YouTube — an embedded YouTube video; paste the video ID in the card sidebar (the part after v= in the YouTube URL)

Choosing icons

Click an empty icon in the editor, or the star button in the block toolbar, or Choose Icon in the card sidebar, to open the icon library: over 2,000 free icons from Font Awesome, or switch the Icon set menu (left of the styles) to Phosphor for a lighter, rounded look in Regular, Bold or Fill, or to Lucide for clean outline icons with even strokes in Regular, Thin or Bold. Search by what the icon shows or means (phone, leaf, calendar), and narrow Font Awesome to Solid, Outline or Brands (company logos such as Facebook or GitHub). Start typing to search, or browse below; click an icon to use it. To swap it later, use the star button (Replace icon) or Change Icon: the picker opens with the current icon first. It keeps the last set and style you picked while you work, so a whole grid stays in one look. The first time anyone on the site opens Phosphor or Lucide, it takes a few seconds to download.

Library icons take the text color, or the Icon Color when Color Icons is on, and they sit inside the colored circle when Icon Background is on. For a logo or a multi-color icon, use Upload Custom Icon instead: it works as before, with any image from the Media Library.

The first time anyone on a site opens the icon library, it may take a few seconds to load. After that it's instant.

Links (parent)

• Link Style — Button, Understated, Tab, Minimal, Prominent, or Bold for the bottom CTA
• Link Arrow — character shown beside link text (default →)
• Link Entire Card — make the whole card one link, labelled by its headline. Image Links and Title Links are hidden while it's on, since the whole card already links. Links inside the card text still go to their own pages.
• Image Links — make the card image clickable. On for new Grids.
• Title Links — make the headline clickable. On for new Grids.
• Hide Button — remove the bottom link when the card is already clickable. A hidden button isn't printed on the page at all, so search engines and screen readers don't find a stray "Learn More" link.

Set each card's URL in the child sidebar or toolbar when the card is selected. A card without a URL isn't linked, whichever link settings are on. Link text defaults to "Learn More" and is editable inline. When the link text is a general phrase like "Learn More" or "Read More", screen readers and search engines also hear the card's headline with it ("Learn More about Our Services"), so each card's link says where it goes. Visitors see the same button.

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, Original (no cropping: each image keeps its own shape), 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). Left at the default, H4, titles move up a level on the live site wherever H4 would skip one, for example to H3 under an H2 section title, so the outline stays in order for screen readers and search engines. They look the same, and the editor still shows H4. Any other level stays as you pick it.
• 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.

For a grid of headlines, turn on Hide Descriptions on the Grid. Cards then show only their media and headline, in the editor and on the page. The text stays saved in each card, so turning it off brings it back.

Switch to an Icon List

To turn a Grid into an Icon List, select the Grid, click its icon at the left of the block toolbar, and choose Icon List under Transform to. Each card keeps its icon, headline, text, and link, and the icon moves beside the text. Columns, card background, shadow, icon, and headline settings carry over.

Icon List only appears in the menu when nothing would be lost. It's left out when any card:

• shows a photo, video, emoji, or YouTube video (icon and text cards convert, as do cards whose media is still empty)
• has a heading, image, gallery, pills, or other block in its text that an Icon List item can't hold (paragraphs and lists are fine)
• shows its link button with wording other than "Learn More" (a hidden button is fine; the whole Icon List item becomes the link)

Icon List items have no alignment setting, so centered text goes back to the left.

Block width

Grid supports Wide and Full alignment.

Tips

• For a large or .mov card video, click Optimize for web in the card sidebar to swap in a small MP4 copy (see Optimize background videos).
• Three or four columns suits most grids.
• For cards that should click through anywhere, turn on Link Entire Card with Hide Button. Each card is then one link named by its headline, which reads better for visitors using screen readers and for search engines than a row of "Learn More" links.
• With Link Entire Card on, clicking an image inside the card text opens the card's link, not the image's lightbox. Links and buttons in the card text still work on their own.