Skip Navigation

Creating Responsive Columns and Grids in WordPress

With the Toolset Grid block, you can easily organize your content into responsive columns and grids. You can create a website that will look great on desktops, tablets, and phones.

You can also set a different layout for each device type. Of course, you can many Grid blocks on your page.

Each grid consists of rows that have cells in it. In each cell, you can place one or more blocks. The first step after inserting a Grid block is to set the number of columns.

Selecting a layout for your Grid block
Selecting a layout for your Grid block

Once you have your columns in place you can easily adjust the width by dragging the column border.

Resizing the columns in the Grid block
Resizing the columns in the Grid block

The Grid block settings

The Grid block has multiple useful options:

  • You can change the number of columns at any time. When you reduce the number of columns, your content automatically shifts.
  • You have full control over the gap (space) between columns and rows.
  • You can have different columns per screen size. On wide screens, place several columns. On tablets fewer and usually, one column is great for phone screens.
  • You can reverse the column order for sensible image positions. This allows you to control when “floating” images appear on phones. Reverse the column order for right-floating images to come before the text on phones.
Setting a Grid block properties
Setting a Grid block properties

Using grid features in Views and archives

The features of the Toolset Grid block are also available when you create Views and design archives. The grid layout makes your lists of posts look great on narrow screens.

Changing the grid options for a View

To change grid options for your View, select the View Loop block and expand the Grid Settings section. Tweak the options for your View’s grid output.

Changing the grid options for a WordPress Archive

To change grid options for your WordPress Archive, select the WordPress Archive Loop block and expand the Grid Settings section. Tweak the options for your archive’s grid output.

Main Toolset Block Used in this Lesson

Create fully responsive layouts


Updated
November 16, 2020