Creating grid layouts

This page showcases various multi-column layouts built using WordPress blocks. All these layouts can be created within the Block editor.

We are going to use the Columns block for building grid layouts on the page. It is also possible to add text, media, and other types of content into columns. Since we are going to use only default WordPress blocks, there is no need to install any 3rd party plugins to replicate layouts shown on this page.

Classic grid with title and content

The layout below uses two (2) Columns blocks, where each column includes the Heading block and the Paragraph block. We have also changed a default size of the Heading blocks using typography options provided by the Block editor.

WordPress

Software designed for everyone, emphasizing accessibility, performance, security.

Block editor

Tool to create media-rich pages and posts and to control their layout with ease.

Themes Harbor

Company specialized on building WordPress themes for professionals.

Statistics

WordPress is the platform of choice for over 42% of all sites across the web.

Community

The WordPress community is welcoming and inclusive, and helps you reach your goals.

Mission

The basic WordPress software is simple and predictable so you can easily get started.

It is also possible to set custom colors for columns using color options provided by the Block editor. Moreover, we can define a “wide” or “full” alignment for the Columns block. Below, you can find two (2) Columns blocks with a set wide alignment for each Columns block, where each column has its own colors.

WordPress

Designed for everyone, emphasizing accessibility, performance, security.

Block editor

Tool to create media-rich pages and posts and to control their layout with ease.

Themes Harbor

Company specialized on building WordPress themes for professionals.

Statistics

WordPress is the platform of choice for over 42% of all sites across the web.

Community

The WordPress community is welcoming and inclusive.

Mission

WordPress is simple and predictable so you can easily get started.

Grid with image, title, content and link

The layout below uses the Columns block, where each column includes the Heading block, the Image block and the Paragraph block. The last paragraph in each columns has a link, which was added using a default link option of the Block editor.

Meet WordPress

Beautiful designs, powerful features, and the freedom to build anything. WordPress is both free and priceless at the same time.

Meet Themes Harbor

Start using a professional WordPress theme by Themes Harbor to improve your online presence.

Choose theme

If you would like to display image on one side and text of the other then it’s better to use the Media & Text block. Below, you can find the Columns block, with a two columns layout and full width alignment, where each column contains the Media & Text block.

photo of person using laptop for graphic designs

Meet WordPress

Beautiful designs, powerful features, and the freedom to build anything you want. WordPress is both free and priceless at the same time.

man sitting in front of three computers

Meet Themes Harbor

Start using a professional WordPress theme by Themes Harbor to improve your online presence, and take your brand to the next level.

The Media & Text block is consisted of two sections: Media and Text. In the layout below, the text section of Media & Text block includes: the Heading block, the Paragraph block and the Buttons block.

Grid with background images and videos

If you would like to display a background image or/and video for each of the column in your grid then it is better to use the Cover block. Below, you can find the Columns block, with a three columns layout and wide alignment, where each column contains the Cover block.

Decisions, not Options

Besides using image or video as a background, you can also display a gradient or a plan color in the Cover block. Moreover, you can change position of your text inside the Cover block. And yes, you can use the Heading block along with the Paragraph block inside the Cover block.

Fantastic Developer Community

Deadlines Are Not Arbitrary

Good deadlines almost always make you trim something from a release. This is not a bad thing, it’s what they’re supposed to do.

The Vocal Minority

Note: This page was built using the template called “Blank content area page“. By default, this template displays an empty content area but keeps the site header and site footer unchanged. It allows to create various page layouts using blocks only.

Since this template does not output the page title by default, make sure to use the Heading block (h1) somewhere on your page to create the main title for your web page, which is needed for SEO purposes.