Create a Grid

IntroductionIntroduction

In this guide, we will show you the main steps to create a fully functional grid. Grid settings provide further options and possibilities which are not presented in this guide. However, all grid settings have descriptions in the admin interface and are self explanatory.

Set up source typeSet up source type

To get started, you need to set which content from WordPress you want to display in your grid. You will find, in Grid Settings > Source Content, 3 kind of sources:

  • Post type (posts, pages, media or any custom post type)
  • Term (categories, tags or any custom taxonomy terms)
  • User (WordPress users)
Grid Settings - Set post type as source
Source type – Post type
Grid Settings - Set term as source
Source type – Term
Grid Settings - Set user as source
Source type – User

Depending of the selected source, you will find settings to adjust the content displayed in your grid. For example, if you use post type, as source type, you will be able to query posts by taxonomy term(s). Each source has its own settings to fine tune content queried and displayed in the grid.

Set up media formatSet up media format

Gridbuilder ᵂᴾ works with WordPress post formats to handle media in each card (post, term or user).

In Grid Settings > Media Formats, you will be able to set which media formats are allowed in your cards. It means that you can allow or not gallery, audio or video formats.

Gridbuilder ᵂᴾ can automatically fetch the first media in the post content according to the post format. If you want a such behaviour, you need to enable the option First Media Content.

Grid Settings - Set first media content
First media content
Edit post - Set post format audio
Post audio format

Otherwise, you can set media format and media content in preview mode in your grid settings. In preview mode, each grid item has a settings button to edit the post, user or term.

Grid Settings - Preview mode
Grid settings – Preview mode
Grid Settings - Preview mode se media format
Preview mode – Media format

When you set up a media format in preview mode this applies to the post/user/term. So, these settings will be used in all grids because it’s attached to a post/user/term custom field.

Set up grid style Set up grid style

Once you have set content to display in your grid, you need to set the style/layout of your grid. There are 3 types of grid:

  • Masonry: This layout applies a number of columns to each item and keep natural heights according to image aspect ratio and content length.
  • Metro: This layout applies a number of columns and rows to each item. So, in most of cases it will crop images and it cuts content which overflows.
  • Justified: This layout applies an average row height to each item and keep natural width of images. It preserves image aspect ratio but it cuts content which overflows.
Grid Settings - Set grid style
Grid settings – Grid style
Grid Settings - Preview mode edit card style
Preview mode – Card style

Each type of grid has its own settings like the number of columns, the row height, etc.

In preview mode, you will be able to set the number of columns and rows of each post/user/term. These settings will be used in all grids because it’s attached to a post/user/term custom field.

Set up card stylesSet up card styles

In Grid Settings > Card styles you will be able to assign card(s) to your grid. If you use as source type Post Type, you will be able to assign cards per post type and per post format.

Grid Settings - Edit card styles
Grid settings – Card styles
Grid Settings - Select a card
Grid settings – Cards selector

A card corresponds to a Grid Style (Masonry, Justified or Metro). Masonry cards can only be used with a Masonry grid style. This restriction is due to the fact that Justified and Metro styles constrain cards in height. So, it’s not possible to have content above or under the thumbnail like with a Masonry card. Otherwise content will overflow.
However, Justified and Metro cards can be used with any kind of grid style.

That’s it, you’ve just created and set up a grid. Now, your grid needs to be inserted in your page thanks to shortcode or Gutenberg block.