How to setup spacing bwtween children elements?

Unity Engine
1

I am looking for the same way in css:

div > *:not(:last-child) {
    display: block;
    margin-bottom: 30px;
}

But it seems the uss not support ‘not’ and ‘last-child’. How can I make spacing between children then?

1 Like
2

You can use dirty approach, like this:

.flex-gap {
  display: flex;
  flex-wrap: wrap;
}

.flex-gap > div {
  margin: 6px;
}

but it is not accurate.

It would be great if Unity supports the gap property.
Like in CSS:

.flex-gap {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
}

Reference: CSS Gap Space with Flexbox

15 Likes
3

Totally agree, we need this property running by default

6 Likes
4

This is the most user-friendly way to add the space between flex layout elements. It would make it very friendly for newcomers with web experience.

5

I was also looking for the flex gap property

4 Likes
6

Same here, I am looking for the gap property, as well. This would be applicable to CSS grid layout, too.

7

It looks like the Yoga 2.0 release from a few months ago includes gap, rowGap, and columnGap support, so now we need Unity to update the dependency and expose the properties:

1 Like
8

@benoitd_unity FYI

9

@benoitd_unity Are there any news about that? We are also waiting for the gap property.

4 Likes
10

I really hope this gets implemented soon. It would make things so much easier

1 Like
11

+1

We are using a lot of menu bars in our current game (made using UITK) and the only solution we found to handle the gap between elements is to use a custom manipulator that adds a class to the last-child, which remove the margin-left property set for every other children.

Adding gap would be time saving!

1 Like
12

I wrote a simple script for gap (or child spacing) feature - GapContainer.
As the previous developer said, the custom manipulator code that adds last-child was the basis.
(https://gist.github.com/shanecelis/1ab175c46313da401138ccacceeb0c90)

I organized and posted it in Korean, but you will be able to read it because it is mostly just a script.
I’m leaving a link as an answer in case it helps.

(https://hotsunchip.tistory.com/42)

I hope that CSS properties that have not yet been implemented, including gap, will be implemented soon!