Editor X offers a range of layout tools that provide an efficient way to arrange, align and distribute space among elements in responsive design.
In this tutorial we'll explore the benefits and responsive behaviors of the Layouter, grid, and Repeater to better understand when it's best to use each tool.
Layouters and Repeaters are based on flexbox technology which allows content to logically adjust as the screen size changes.
In a flexbox, items align separately on each row, regardless of how items are positioned on other rows. This means items may not line up, as the red lines here show. Items in a flexbox automatically arrange based on screen size and content within the flexbox may also affect the row arrangement.
Grids are based on a 2-dimensional framework made up of columns and rows. These columns and rows control the content that is placed inside the grid areas.
Next we’ll explore some use cases for each of these layouting tools, beginning with Layouters.
If your site requires many responsive items with unique content and designs, a Layouter may be the best option. Conveniently, Layouters automatically adjust items depending on the visitor’s screen size.
Within a Layouter, you can add different content to each item and choose how these items are displayed in relation to each other at each breakpoint.
You can also choose from a variety of display types such as mosaics, columns, sliders and more.
Now let’s consider when you could use a grid.
A grid is usually the best option for creating precise, pixel-perfect layouts…
…because you can create individual row and column definitions to control exactly how the grid is structured. You can also set grid properties using different units of measurement, as shown here.
When you want to create a section that contains items with the same design and layout, but different content, you should use a Repeater.
Keep in mind that changes to the design of any item in a Repeater affect all other items within the Repeater, which isn’t the case for grids and Layouters.
As we mentioned earlier, similar to Layouters, Repeaters are based on flexbox technology meaning that they can automatically wrap at different viewports. To learn more about this tool, explore our dedicated Repeater tutorial.
Of course, you can always use a combination of these different layout tools. For example, you can place a grid inside a Repeater or a Layouter.
In this section we'll consider two other factors that can help you choose between using a grid or Layouter, beginning with the layouting approach of the tools.
The Layouter is based on flexbox technology and uses a content-first logical approach. This content-first approach means each item's size and position influences other items within the Layouter, as well as the container.
As you can see here, changing the size properties of an item in a Layouter—or the elements within an item—may affect the dimensions of items adjacent to it. For more information, you can check out our full Layouter tutorial on Academy X.
The grid, however, uses a layout-first logical approach meaning its layout is defined by the columns and rows that make up the grid, and not necessarily the content within it. Here we’re customizing the grid by adding an extra row and setting its minimum height, but you can define properties for the grid that best suit your design. You can learn more about this in our video covering all aspects of the grid.
.
After setting the grid’s properties, you can choose how you want to position your elements according to the grid cells. In a grid, elements can also occupy overlapping areas, giving you endless possibilities to work with.
The other difference to consider when choosing a layout tool is their behavior between breakpoints. In a Layouter, items automatically adjust when the screen size changes. Even if the breakpoint remains the same, items may wrap depending on how much space is left.
This example shows how items can adjust to fit any viewport. You can also change the display type of your Layouter for each breakpoint.
With a grid, you can set different grid properties to create different layouts per breakpoint. Using this tool, your layout will not change until you reach a new breakpoint.
To sum up what we’ve covered, these are some typical use cases for each layout option:
Repeaters are best for multiple items with the same design and different content.
Layouters are best for items with unique designs that may adjust in size and position as the viewport changes.
And, finally, grids are the best choice for precise, pixel-perfect designs with distinct layouts at each breakpoint.
Editor X is an advanced creation platform. To master it, continue watching this series of video tutorials.
