✓ This article will help you understand what the grid system is, why it's fundamental and how to use it to create multiple columns of content in your blocks.
Introduction
Usually, on Shopify, when you create a section or block from the theme editor, they're already set up with a predefined grid system. For example, you can add sections with a title, text and button on the left and an image on the right. However, with Kehio Editor and its grid system, we leave it up to you to compose your own sections. This allows you to be more flexible in managing the space each column will occupy in the section, offering further customization to your specific needs.
Understanding the grid system in Kehio Editor
Grid System definition:
In web design, a grid system is a structured framework of horizontal and vertical lines that help organize content on a page. These grids serve as a guide for placing elements in a cohesive and balanced manner across different pages of a website. Used correctly, a grid system not only improves the aesthetics of a page, but also its functionality, making information more accessible and easier to navigate for the user.
The grid system is a fundamental component of Kehio Editor. It structures the architecture of your creations by defining how content is positioned within each block. Here's a guide to help you better understand and use this system effectively.
How the grid system works
1- Basic layout
The standard grid system is often based on 12 columns for computer screens, allowing you to divide space flexibly to create different content architectures, such as side-by-side blocks.
To create two columns, for example, you'd divide the space by 2, allocating 6 columns to each content block.
2- Adaptability to different devices
Desktop: On computer screens, you can configure your blocks on a 12-column grid. This offers great flexibility for the creation of various layouts. For situations requiring an odd number of columns, such as five, Kehio Editor offers an alternative 10-column grid, allowing an equitable division of space.
Mobile: For mobile devices, the grid is generally reduced to 4 columns due to screen size constraints, which is sufficient for the majority of mobile designs. A 3-column grid is also available for layouts requiring three elements per line, useful for elements such as icons or buttons.
3- Default settings
By default, content added to a block occupies the full width of the page (1/1 of the grid), allowing you to start with a blank canvas and adjust the layout as required.
Practical Use Cases
Multiple Column Creation: Use the grid to divide your page into multiple columns, enabling creative layouts such as image galleries or feature lists.
Strategic use of Grids on Mobile: Adapt your content for mobile screens by using 3- or 4-column grids, optimizing display without overloading visual space.
Harmonious layout: Adjusting columns can help create symmetry or highlight certain elements by strategically placing them in wider or narrower columns.
This grid system in Kehio Editor is essential for creating web designs that are not only visually appealing, but also functional and suitable for all types of devices. By mastering this system, you can fully exploit the flexibility and power of Kehio Editor to achieve optimized creations.
Creating a 2-column section on computer and a 1-column section on mobile
Step 1: Configuring the Grid System :
Access the Block: In the creation tab, click on your Block. The right-hand panel will open.
Select Grid: In this panel, in the "Grid System" section, configure the grid to use 12 computer columns.
Step 2: Split Content
Add Content: Click on Content to open the corresponding configuration panel.
Configure Grid: Set the grid system slider to 6 for the computer, so that your main content occupies half the screen (12/2 = 6). For mobile, leave it on 4 so that content is displayed over the full available width.
Step 3: Duplicate content
Duplicate: To duplicate content, place your mouse over the content and, when hovering over it, click on the "Duplicate" option. This action preserves the grid settings of the original content.
Step 4: Gap management between columns
Adjust Gap: In the main block containing your content, go to the "Gap" section to manage the space between the two columns.
For Mobile
By default, by following the steps above, your content will appear in a single column on mobile. However, you can optimize the organization of your blocks and the spacing between them.
Step 1 : Line spacing
Adjust Mobile Gap: In the main frame, adjust the Gap in the mobile part to adjust the space between lines.
Step 2 : Reverse Content Order
Inversion on Mobile: In the block, use the "Reverse order on mobile" option to change the display order of your content, which can be useful for improving navigation and presentation on mobile devices.
These steps will enable you to create a responsive section that adapts for both computer screens and mobile devices, optimizing display and user interaction with your content.
Create a Section with 3, 4 or 6 Columns on a computer
To set up sections with 3, 4 or 6 columns in Kehio Editor, follow the basic steps for creating sections, simply adjusting the column layout to the desired number. Here's how to proceed step-by-step for each configuration on a 12-column grid system.
To create 3 Columns:
In the "Content" section, set the grid system cursor to 4 for each content block. With a pre-configured 12-column grid, dividing by 3 (12 / 3 = 4) means that each content block will occupy 4 columns.
To create 4 Columns:
In the "Content" section, set the grid system slider to 3 for each content block. As you're still working with a 12-column grid, divide by 4 (12 / 4 = 3) assigns 3 columns to each content block.
To create 6 Columns:.
For this layout, set the grid system cursor to 2 for each content block. By dividing 12 by 6 (12 / 6 = 2), each content block will take up 2 columns.
Shared steps for all configurations:
Open Content Panel: Start by accessing the creation tab and click on your Block to open the configuration panel on the right.
Select Grid System: Make sure the grid system is set to 12 for computer configurations.
Duplicate Content: To simplify the creation of multiple sections, duplicate the initial content by clicking on the "Duplicate" option when hovering over the content. This preserves the grid settings of the original content.
Gap management : Adjust the gap between columns to ensure appropriate visual separation between content.
Creating a 5-Column section on a computer
To create a 5-column section on the computer in Kehio Editor, it is necessary to modify the standard grid system to adapt it to a division that allows fair distribution of content. Here's how to set up and edit a 5-column section.
Step 1: Configure the Grid System
Block access: Open the creation tab and select your block. This will open the configuration panel on the right-hand side.
Grid Selection: In this panel, under the "Grid System" section, adjust the grid to use 10 columns on the computer. This is necessary because dividing by 5 in a 12-column system does not result in a round number of columns.
Step 2: Dividing content
Add Content: Click on Content to access content configuration options.
Grid Setting: Set the grid system slider to 2 for each content item on PC, which means that each content block will occupy 2 of the 10 available columns. On mobile, keep the setting at 4 to use the full available width.
Step 3: Duplicating content
Duplication: Position your mouse over the content you wish to duplicate, and click on "Duplicate" when you hover over it. This function preserves grid parameters, making it easier to duplicate content while maintaining the same grid structure.
Step 4: Managing the space between columns
Adjust Gap: Manage the spacing between columns by adjusting the "Gap" parameter in the main block containing your content. This is crucial to ensure proper visual separation between elements.
By following these steps, you can efficiently create a 5-column section on a computer using Kehio Editor.
How to Create 2, 3, 4 Columns on Mobile
When creating adaptive sections for mobile devices with Kehio Editor, column management follows the same principle as for desktop configurations. Here's how to set up 2, 3 and 4-column sections on mobile.
2 and 4 column configuration :
On mobile devices, the standard grid is generally divided into 4 columns, allowing several configurations.
Step 1: Access the block
Click on your block. The configuration panel will open on the right-hand side. From your block, in the configuration panel under the "Grid System" section, adjust the grid so that it uses 4 columns on mobile. This step is crucial to divide the available space correctly.
For 2 columns:
Set the grid system slider to 2 on mobile for each content. With a grid of 4, this means that each content will occupy two of the four available columns (4/2 = 2), allowing two elements to be displayed side by side.
For 4 columns:
Set the grid system cursor to 1 on mobile for each content. With a grid of 4, setting the slider to 1 means that each content item will occupy one of the four available columns (4/4 = 1), perfect for aligning four distinct elements in a single row.
To create 3 columns :
Step 1: Access the block
Click on your block. The configuration panel will open on the right-hand side.
Step 2: Configure Grid System
In the configuration panel, under the "Grid System" section, adjust the grid to use 3 columns on mobile. This step is crucial to correctly dividing the available space.
Step 3: Adjusting the content
Click on Content to open the configuration options.
Set the grid system cursor to 1 on mobile in each content. With a grid of 3, setting the cursor to 1 means that each content will occupy one of the three available columns (3/3 = 1).
Step 4: Duplicate content if necessary
If you need more than one piece of content, duplicate the initial content to retain the grid settings. To duplicate, place your mouse over the content, and on hover, select the "Duplicate" option.
Step 5: Gap management for columns
Adjust the column gap in the main block containing your content to ensure appropriate visual separation.
If you need help understanding and managing your grid system, feel free to contact our support team at any time by e-mail or live chat .