Grid
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 Standard card with a photo at the top, a Text card without the photo, and Icon card with an icon instead of a photo, a Video card with a video instead of a photo 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
This field 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, when enabled, 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.
Style
The Style field changes the appearance of every card within the grid. The options are Default, Cards (with the border radius determined by your site’s button border radius set in the customizer), Centered, and Overlay.
Note: The Overlay style looks great when set to alignfull. Try putting it next to a Photo Feature or a Hero!
Default
Cards
Centered
Overlay
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 these and add whatever you’d like.
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. If a link exists, the Style toggle will appear beneath that will allow you to switch the link appearance between Understated or Button. The link will appear at the bottom of the card. 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.
When you add a link to a card, you’ll be able to toggle the link style.
You can edit the link text inline.
Card Types
Photo Card
The default card is the photo card, which displays a photo at the top. You can determine if this photo is cropped in the parent block. You can enter a Link in the sidebar. You can change the photo by clicking on it.
Icon Card
The Icon Card works best when the parent is set to the Centered style. In addition to a Link field, the Icon Card also has an Icon Size field that will control the size of the icon. When there are multiple Icon Cards in your grid, you may want to set these to all be the same size.
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 with 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!
Adding Cards
To add a card to your Grid block, click on the prompt in the editor.