Choosing a layout tool.

Discover the responsive behaviors of each Editor X layout tool. Learn some common use cases for Layouters, Repeaters and grids to arrange, align and distribute space among elements on your sites.

Discover the responsive behaviors of each Editor X layout tool. Learn some common use cases for Layouters, Repeaters and grids to arrange, align and distribute space among elements on your sites.

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.

NEXT VIDEOS

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Workspace

Learn how to size and dock elements and work with advanced flexbox and CSS grid. 

Play icon

Did you find this resource helpful?

Thank you for your feedback!

Related learning resources.

VIDEO LIBRARY

Title

Learn how to add new sections, rearrange them & flip them to vertical.

Watch Now

LESSONS & EXERCISES

Title

Learn how to work with sections—the building blocks of your site.

Start Lesson

VIDEO LIBRARY

Title

Get to know where you control size, position and behavior of all elements.

Watch Now

LESSONS & EXERCISES

Title

Learn how to take precise control over the positioning of elements using grid.

Start Lesson

Ready to start creating?

Search icon
Home icon
LESSONS & EXERCISES
Arrow down icon
VIDEO TUTORIALS
Arrow down icon
External link icon
External link icon
ACADEMY MENU ▶
Search icon

Top searches

People are searching for

Video tutorial introducing the Editor X workspace with an overview of the responsive layouting and design tools.

VIDEO LIBRARY

Introducing Editor X

Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.

Video introducing the Editor X workspace with an overview of the responsive layouting tools and design capabilities.

VIDEO LIBRARY

Getting Started

Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.

Thumbnail indicating interactions. Orange background with a shaded orange container over it. In the middle of the container is a white logo.

LESSONS & EXERCISES

Hover Interactions

Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.

See all results ▶