top of page

Choosing a layout tool

Layouting tools provide an efficient way to arrange, align and distribute space among elements in responsive design. Grid, Layouter and Repeater are all examples of layouting tools you can use to display content on your sites. In this lesson, you’ll understand the responsive behaviors and benefits of each layout tool so you’ll know which one to use for your next design.

When should you use a Repeater?

Repeaters are ideal for designs that include multiple items with the same design and layout, but different content. You can find more information about repeaters here.

A Repeater layout with three items. Each item has the same design, but the text and image that accompanies each one is different.

When should you use a Layouter?

Go with Layouters for items with unique designs that may adjust in size and position as the viewport changes. With layouter and repeater you can also set the layout to interactive layouts like sliders. Items may wrap automatically as the screen size changes and this happens even without moving to a new breakpoint. For more information about Layouters click here.

A Layouter with 5 items across 2 rows. The top row contains 2 items: one with text and one with an image of a female model. The bottom row contains 3 items: an image of a male model, text and a CTA and a final image of a camera

When should you use a grid?

The grid is a layout tool that allows you to build precise, pixel-perfect designs. It lets you build individual column and row definitions using units of measurement to control the grid structure at each breakpoint and position the elements accordingly. You can learn more about the grid here.

Note: In some cases you may also want to combine these layouting tools. For example, if you’re using a Layouter or a Repeater, you can choose to adjust the grid inside any of their items.

By doing this, you can align elements inside individual Layouter or Repeater items according to the grid’s cells. This gives you more precise control over how your content is distributed.

A list of seven model’s names next to their portraits on a page entitled New Faces on Sole Management’s website











Was this lesson helpful?

Thank you for your feedback!

How can we improve?

Thanks for submitting!

Explore more topics

Additional resources

Visit our help center

Ask the community

Hire an expert

Contact customer care

bottom of page