C9 Grid Block

 Overview

Websites don’t need to all be centered headlines with gigantic BUY NOW buttons. This block is a container for repeatable rows of content, which can be split into columns, and are responsive by default.

Grid

C9 Grid Settings & Responsive Containers

The responsive grid container, or C9 Grid block is the primary layout block we use for most of the section and page templates you can find when you click on the feather icon. This block’s code is what magically makes the landing pages stack into nice columns on even the tiniest of phones users may be accessing your site on.

Most importantly, with the flexibility from our columns, rows, and alignment tools, designers can now break up designs into more effective layouts. Don’t get too excited, but that means non-standard grids with columns of varying sizes and alignments can now be configured with relative ease, or if you’re incredibly lazy like we are, you can start out with some of the templates we provide from within the section templates or page templates modal because making all these decisions is putting this introvert to sleep!

The best part of responsive grids, with the help of our C9 Starter Theme, you’ll never have to worry about how your precious layouts will look on mobile phones when your boss calls because the blocks will stack into smaller columns and the theme will make your fonts just a TEENSY bit smaller to fit.

How does it work?

There are two components to the C9 Grid block: an outer container, which uses most of the same classes and CSS as the C9 Posts Grid block, and an inner container that has its own settings for backgrounds, container width, and vertical height/alignments. An inner container can have multiple rows and columns. Columns and rows can be filled with just about any WordPress block content such as video, forms, product catalogs, e-commerce stores, forums, and membership websites.

The term “container” comes from the Bootstrap framework. Many of our container styles are based on Bootstrap’s layout grid styles.

The outer container can be configured to have containers that are the default Bootstrap width of 1140px, a narrower container setting of 960px, a wide 1200-1260px width, or full viewport (vw) width alignment as Gutenberg makes use of. This may be theme dependent, but the C9 Theme follows this configuration exactly on the frontend.

The second component of the C9 Grid is the inner container, where almost any kind of content can be displayed.

Unlike the C9 Posts Grid, the C9 Grid‘s outer container and inner container have a minimum Window Height setting, should you need to center a grid of content in a container, and they both have Background settings that are pretty similar. You can see this in action on almost all of our section templates and page templates, and most notably in the design portfolio example in the Page Templates section of our modal.

Reminder! C9 Grid only works as a top-level block.
 You can try to fit the C9 Grid in other elements like carousels, but it’s meant to be the first element that goes into the Gutenberg editor.

Outer Container Settings

Window Height (vh)

Despite looking like a complex mathematical equation, vh is really just short for “viewport height.” Use this setting to set the minimum height of the current C9 Posts Grid block row. We frequently use this to set a large height to allow for vertical space in the background imagery and videos.

Number of rows to produce

Adds rows to the inner container. Defaults to one row. You can also add a row to your inner container at the bottom where it has add and remove buttons.

Spacing Options

Padding

Set the Bootstrap padding class on the inside of the outer container. Choose from any of the available settings here. This adds visual padding to the inside of the outer container and is set to Padding 5 by default. To set separate padding classes for each drop down, click on the chain icon to unlink them.

Margins

Set the top and bottom Bootstrap margin class. Click the chain link to set different margins for each. This will add spacing to the outside of the C9 Posts Grid outer container. This means the background may be seen above and below this section.

Background Settings

Background Image

After uploading a background image, whether it’s meant to be used as a pattern, a fullscreen background image, or as an image positioned somewhere else on screen, you’ll notice a few additional settings that display including a Focal Point Picker. We recommend using 1700px wide graphics for background photos, and for background patterns and images we recommend using at least 144dpi images so they look crisp on higher resolution displays.

What background element is on top of which in the z-index of the dom?

There are four layers to backgrounds in our grid components. Beginning with the bottommost layer, the background color, each background component is placed on its own in the z-index so you can get a variety of useful background effects like blend modes over videos, or color overlays over textured patterns, or simply a photo with a smokey overlay so text can be placed on the container on top of it for a header file like many of our saved templates.

  1. Background Color
  2. Background Image
  3. Background Video
  4. Color Overlay

Focal Point Picker

Click and drag the circle on screen to select the part of the image where your focal point is, and you’ll notice the horizontal and vertical position update as you drag/drop the picker.

If you don’t see the image moving in your editor, make sure you change the Size attribute to custom should you need to scale the image up or down.

Attachment

Scroll is the default so the image moves when the user scrolls. Select Fixed to have the background image remain in place as the user scrolls the content past it.

Background Color

Select with a color picker, or choose a custom color from your saved color settings for a background color. The background color shows up below the background image.

Color Overlay

This layer allows you to select a color, opacity, and blend mode to put an overlay on top of your background videos and photos. This can allow for text to be easier to read, or to change the colors and effects of your background imagery.

Opacity

Used in conjunction with color overlay to make the background semi-transparent or completely opaque.

Blend Mode

Change the color overlay background color blend mode for applying different filters to photos.

Video Options

Embed File

Upload a small video clip for a background video. We’d recommend something that’s optimized in the MP4 format.

Embed URL

You can enter in a link to a YouTube video here and hit set, and the field will be set to the video ID of the YouTube video, and should show up in the background of your container grid once you do so. By default, our videos loop, they fade in, and they’re also muted. Nobody wants auto-playing music on a website. Period.

Advanced

HTML Anchor

If you have ever wanted to link directly to a section on the page, you can add in a CSS ID here such as “page-section-media” and then use a direct anchor link to yoursite.com/page-name/#page-section-media and be taken directly to the top of your grid.

Very helpful for creating on-page navigation with multiple sections on a page.

Additional CSS Class

Use this block to add a custom CSS class to the outer container element for the C9 Grid block. This allows you to write your own custom CSS for specific sections of the site, and is supported by most of the C9 Blocks.

Inner Container Settings

Options on Block

Select Column Container

Focus on the column container so you can changes options specifically for the block between outer container and blocks.

Add/Remove Row

Add or remove top-level inner-container rows.

Lock/Unlock Row Moment

Toggle the lock on row movement to change row position like any other block.

Sidebar Options

Window Height (vh)

Select the post type that you’d like to display in the inner grid. By default, this will be your posts, so if you haven’t created any blog post content, then you will see an empty grid when adding the inner container.

Columns (max=6)

Choose column number (per row).

Column Layout

Choose from a few options to control relative column widths.

Column Gap (max=10)

Adjust the spacing between columns.

Column Inner Max Width (px)

Adjust the width of the content inside the container wrapper.
Contains additional boolean: Center Columns in container

Responsive Columns

How many columns would you like to display in the grid of content? Defaults to two columns and goes all the way up to 4. It is also possible to have a single column by changing Columns to 1.

Spacing Options

Padding

Set the Bootstrap padding class on the inside of the outer container. Choose from any of the available settings here. This adds visual padding to the inside of the outer container and is set to Padding 5 by default. To set separate padding classes for each drop down, click on the chain icon to unlink them.

Margins

Set the top and bottom Bootstrap margin class. Click the chain link to set different margins for each. This will add spacing to the outside of the C9 Posts Grid outer container. This means the background may be seen above and below this section.

Color Settings

Background Color

Select with a color picker, or choose a custom color from your saved color settings for a background color. The background color shows behind the content container within the grid. We find that we’re typically giving content containers backgrounds when there is a pattern in the background and text is hard to read.

Opacity

Used to make the color semi-transparent on the content container.

Advanced

Additional CSS Class

Use this block to add a custom CSS class to the outer container element for the C9 Grid block. This allows you to write your own custom CSS for specific sections of the site, and is supported by most of the C9 Blocks.

HTML Anchor

If you have ever wanted to link directly to a section on the page, you can add in a CSS ID here such as “page-section-name-of-your-section” and then use a direct anchor link to

yoursite.com/page-name/#page-section-name-of-your-section

and be taken directly to the top of your grid with that ID.

Very helpful for creating on-page navigation with multiple sections on a page either to an inner container, or on the C9 Grid outer container itself. Both can be given unique IDs and linked to from the Navigation Links or Appearance > Menus part of the WordPress Menu.