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.
Once you have your columns in place you can easily adjust the width by dragging the column border.
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.
Using grid features in Views and archives
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.
- Creating and Displaying Repeatable Field Groups
- Displaying a Map on A Single Post Template
- Displaying a List of Posts on A Map
- Creating a Custom Search
- Creating a Hero Section
- Creating Sliders with Dynamic Post Content
- Adding Dynamic Content to Your Homepage
- Creating a View
- Creating a Custom Archive Page
- Creating Templates to Display Custom Posts
- Creating Responsive Designs
- Advanced Styling with Container Blocks
- Display Content Conditionally
- Using Third-Party Hidden Fields