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 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.
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.
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.
Create fully responsive layouts
- Displaying Images with Toolset
- Styling Custom Searches
- Styling a Site Header and Footer
- Styling Views and Archives
- Styling Single-post Templates
- Show all related topics...
- How to Design and Choose Images and Illustrations
- Choosing and Applying Colors in Your Site
- Using Typography for Better Website Readability
- WordPress Site Identity
- Where a WordPress Sites Design Comes From
- Adding Custom CSS to Templates, Archives and Views
- Assigning Templates to Posts Conditionally
- Passing Arguments to Views
- Displaying Search Results on a Different Page
- How to Create Custom Searches and Relationships for Users
- Display Dynamic Sources Inside all Text Blocks
- Searching Texts in Custom Fields with Toolset and Relevanssi
- YouTube Videos with Advanced Options
- Displaying Form Data
- Creating templates to display members-only content
- Creating and Displaying Repeatable Field Groups
- Styling Front-End Forms
- 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