Grid
- Blocks
- Section
- Buttons
- Counters
- Blocks
- Comparison Table
- Columns
- Breadcrumbs
- Call To Action
- Landing Page
- Tabs
- YouTube
- FAQ
- Grid
- Hero
- Media Callout
- Voronoi
- Site Preview
- Jump Nav
- Jump Link
- Link-in-Bio
- Logos
- Map
- Media and Text
- Photo Feature
- Posts
- Price List
- Quote Blocks
- Quotes
- Slider
- Structured List
- Socials
- Timeline
- Yearbook
- Vignette
- Video Gallery
Grid
Grid on the frontend.
Arrange different types of cards in a grid that looks great at any viewport size.
Usage
Grids are a common UX pattern. While you can approximate this pattern with the core Columns block, our Grid block removes the guesswork.
The Grid block will seamlessly reformat itself as the viewport size changes, and can contain five types of cards: the Image card with a photo at the top (which is the default card), a Text card without the photo, an Icon card that replaces the photo with an icon, a Video card that displays a video on top, and a YouTube card with an embedded video at the top.
Parent Settings
The parent block (named Grid in the editor) has the following settings. To access these settings, you must have the parent block selected.
Columns
The Columns field determines the maximum amount of cards allowed per row. No matter how many items per row you have your Grid block capped at, it will seamlessly break cards to the next row depending on viewport size until it reaches the maximum allowed.
Three cards per row.
Four cards per row.
Text
Text Size can be toggled on or off in the Block Toolbar and switches the text size between the Small and Normal options. Normal text size is the same as any other paragraph tag on your size, while small is the same as a <small> tag. These sizes can be set in the customizer. This does not affect the Card Headline.
Small text
Normal text
Crop Images
This Toggle Image Crop, when enabled in the Block Toolbar, changes the header images to a cropped, uniform layout. When disabled, the header images will retain their intrinsic aspect ratio. The images, when cropped, are cropped to the golden ratio, 1 to 1.62.
Crop Images enabled.
Crop Images disabled.
Link
When a child card is focused, the Link field appears in the block editor sidebar. You can choose to link to any on-site content, or enter an off-site URL.
The style of your link can be toggled under the Link Style in the parent settings, which allows you to switch between Understated or Button. The link will appear at the bottom of the card(s). The text of the link defaults to “Learn More”, but you can click into the link to edit the link text in the same way you can edit any other text on the cards.
You’re able to toggle the link style in the sidebar when the Grid Block is selected.
You can edit the link text inline.
Child Settings
The Grid supports different types of child cards, including Icon cards, Image cards, Text cards, Video cards, and Youtube cards. When you create a new Grid, it will appear populated with Image cards, but you can delete, add, or edit the cards however you’d like.
Adding Cards
To add a card to your Grid block, click on the prompt in the editor.
Card Types
Photo Card
The default card is the photo card, which displays an image at the top. You can determine if the photo is cropped in the parent block toolbar. You can enter a Link in the sidebar or toolbar when the specific card is selected.
You can change the photo by clicking on it or changing it in the sidebar.
Icon Card
In addition to a Link field, the Icon Card also has an Icon Size field, which can be found and set in the sidebar of the parent settings near the bottom.
You can change the icon by clicking on it or changing it in the sidebar.
Text Card
The simplest of all the cards, this card still supports the Link field.
Video Card
The Video Card works the same as the photo card, but with a video instead. To change the video, just click on it.
The video will autoplay on loop, muted.
YouTube Card
The YouTube card places an embedded YouTube iFrame at the top of the card and has support for the Link field. To change the video, enter the Video ID in the sidebar.
To find the Video ID, use the text after the v= portion of the url. For example, the video ID is the bolded text in the link:
www.youtube.com/watch?v=LTvFsTbyILg
Note
Although in most cases you’ll have grids filled with the same type of cards, you can mix and match any way you please!