New Feature Alert: Items Gaps

Be in the know
,
1

Get complete control over how items are spaced out in Layouter and Repeater using new options for horizontal and vertical gaps.

The Gap property in CSS determines the size of gutters, which is the space between rows and columns within grid and flex items.

Until now, when using a Layouter or a Repeater you could create spaces only by using Horizontal and Vertical Margins :

2502×1450 284 KB

Horizontal and Vertical Margins are applied around the items and not between them. Notice the extra space surrounding the boxes.
When using gaps, the space is applied between the items:

2502×1450 277 KB

Select the Layouter or Repeater and set the horizontal and vertical Gaps from the Display section in the Inspector panel.

You can still use Margins for the items and to define different space for each side of the item. this option will allow you to achieve much more complicated layouts.
Select an item and apply Margins to any side you want (for example you can add margin space to the top and left of each item).

Note:
Gaps for Flex is a new CSS property that is not supported in old browser versions (For example, Chrome 76-83, Safari 12-14, Edge 79-83). As a result, site visitors who’d be accessing your page through old versions won’t be able to see it perfectly. To support older browsers that don’t support Flex-Gaps, you can apply Margins on the Layouter / Repeater items instead of gaps.

Enjoy and feel free to share your feedback :tulip:

3 Likes
2

This is great!

I was annoyed by the old way of things in the past week, so I’m super happy to see this new way of doing it.

3

I appreciate you sharing this special knowledge, and I’ll choose a product to try. You make a valid point. Keep up the fantastic job; it’s a very nice post. because today I need assignments help while looking for a I came across your really interesting post which I like very much. best wishes.