Grid
Responsive card grids with image, icon, text, video, and YouTube card types.
Usage
Grids are a common UX pattern. While you can approximate this with core Columns, the Grid block removes the guesswork — cards reflow automatically as the viewport changes.
The parent Grid holds Card children. New grids start with image cards, but you can add, remove, or mix card types. Although most grids use one card style throughout, you can mix types when the design calls for it.
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 maximum cards per row (1–7 on desktop). The grid wraps cards to the next row and reflows to fewer columns on smaller screens without extra configuration.
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 — embedded iframe; set the video ID in the child sidebar (the
v=value from 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 — semantic HTML tag for card titles (
h2–h6orp) - Headline Appearance — visual typography preset from your Customizer
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 is the sweet spot for most marketing grids; the layout still works on mobile.
- Use Match Height when cards share a row but descriptions differ in length.
- Enable Image Links or Title Links for cleaner cards with Hide Button on.
- Set a uniform Image Aspect Ratio when mixing photo cards for a tidy row.
Screenshots
Front-end
-
Icon cards on a dark section — rounded cards with recolored icons in colored circles. -
Three image cards with headline and description between wavy section transitions.
Editor
-
Grid parent settings — card style, icon size, icon background, and icon color. -
Card child settings — type, headline, link text, and image focal point.
Settings
Grid Settings
Maximum cards per row (1–7). Cards wrap to the next row and reflow to fewer columns on tablet and mobile.
Toggle this setting to make all cards in the grid the same height. This is useful for creating a uniform appearance when cards have varying amounts of content.
Enable this to make the image in each card clickable. This allows users to navigate to a linked page by clicking on the card's image.
Enable this to make the title in each card clickable. This allows users to navigate to a linked page by clicking on the card's title.
Toggle this to hide the link button that appears at the bottom of each card. Use this when the image or title serves as the primary link.
Toggle this to add a background color to each card in the grid. This can help cards stand out or match a specific design theme.
Choose a background color for the cards from the provided palette. This control is available when 'Card Background' is enabled.
Select the text color for the card content. This control is available when 'Card Background' is enabled and helps ensure readability against the chosen background.
Toggle this to add a shadow effect behind each card. This can give cards a sense of depth and make them appear to float above the page.
Adjust the intensity or darkness of the card shadow. This control is available when 'Card Shadow' is enabled and allows for subtle or more pronounced shadow effects.
Control the spread or blur of the card shadow. This control is available when 'Card Shadow' is enabled and helps define the shadow's appearance.
Toggle to display the card text in a smaller size. Use this when you need to fit more text into each card or prefer a more compact look.
Headlines
Select the HTML heading tag for the card titles. This helps define the semantic structure and importance of the headlines for accessibility and SEO.
Choose the visual appearance style for the card headlines. This allows you to style the headlines independently of their semantic HTML tag.
Links
Visual style for the bottom link on each card — Button, Understated, Tab, Minimal, Prominent, or Bold.
Enter a character or symbol to use as an arrow or indicator next to the link text. This can provide a visual cue for navigation.
Spacing
Adjust the spacing between the cards in the grid. This controls the horizontal and vertical distance separating each card.
Set the amount of padding around the content within each card. This controls the internal spacing between the card's edges and its text or media.
Adjust the spacing between the media (image, icon, or video) and the text content within each card. This helps control the visual flow inside the card.
Images
Uniform aspect ratio for image and video cards — Default, None (uncropped), or fixed ratios from 5:1 through 9:16.
Choose the corner style for the cards: sharp, rounded, or fully rounded. This allows you to customize the aesthetic of the card's edges.
Icons
Set the size of the icon in pixels. Use this to make icons more or less prominent in the card.
Toggle to enable or disable a background shape behind the icon. Enable this to make the icon stand out more.
Choose a background color for the icon. This option is useful for matching the icon's background to your site's color scheme or for creating visual contrast.
Toggle to enable or disable custom coloring for the icon. Enable this to change the icon's color from its default.
Choose a color for the icon. This option is useful for matching the icon's color to your site's color scheme or for creating visual contrast.