Close Menu
  1. Grid

Grid

Dirigible's Gutenberg Grid block on the frontend.

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.

Grid card with small sized text.

Small text

Grid card with normal sized 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.

Dirigible Grid block with crop images enabled.

Crop Images enabled.

Dirigible Grid block with crop images disabled.

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!

The Dirigible Grid block with the default style.

Default

The Dirigible Grid block with the cards style.

Cards

The Dirigible Grid block with the centered style.

Centered

The Dirigible Grid block with the overlay style.

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.

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.

The Grid Card sidebar.

When you add a link to a card, you’ll be able to toggle the link style.

Edit a grid card link text by clicking into it.

You can edit the link text inline.

Card Types

A photo card in the Dirigible Gutenberg Grid Block.

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.

An icon card in the Dirigible Gutenberg Grid Block.

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.

A text card in the Dirigible Gutenberg Grid Block.

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.

A youtube card in the Dirigible Gutenberg Grid Block.

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!

Insert a card child block in the block editor.

Adding Cards

To add a card to your Grid block, click on the prompt in the editor.

Grid