Spacing of items inside a panel (WrapPanel)

Question

Many sites and applications using WrapPanel to display your items. Items are queued from left to right and when there is no more space tend to skip to the next line.

For Example:

What is the best way to make this organization? Or it depends on what I'm showing? When you leave all items of the same size and when can they have variable size? (Figure 1, search on google images is similar)

One similarity is that there is always a margin between the elements (however small). But why most applications share content like this:

And not so?

The second option is clearly more symmetric (margin left and margin right).

Answer 1

Actually, I think your second example is less symetric than your first. Think of the space around items in your view as belonging to the item, a constant margin around each item. It then suddenly makes sense that there is less (half) as much margin between the edge of the view and the first item than there is between items themselves. In the latter case, you will have two times the margin, as each item gets its own margin.

Answer 2

Different margin within and outside of the wrap re-enforce the content grouping. By having a different (smaller or wider) margin on the side it becomes clear that the images do not continue beyond the visible area, but the visible group that gets formed by the internal same-width gaps is entirely visible.

Furthermore there often is not space on the sides of the wrap, but only within the columns (gaps). Your example actually shows that: the margin on the side is applied to the whole page, not just the wrap as you show in the wireframe.

Answer 3

Sometimes it is hard to read intention into a UI without insider-context to know if something is a conscious or unconscious decision. We could very well ascribe valid UX principles to explain why something is a certain way, but it's also quite possible it is more accidental.

Consequently there are two possible answers to your question:

As a conscious design decision, having different margins between elements is an example of using grouping principles to create a relationship between the elements using negative space (as other answers have pointed out).

As an unconscious design decision, it can also be as simple as that's how it looks when you're using CSS margins for flowing lists where you don't know which items are at the first or last position in the row.

The CSS applied to each item would therefore be the same, i.e. margin: 10px; When you have two items next to each other the gap between them becomes the sum of the right and left margin:

^{download bmml source – Wireframes created with Balsamiq Mockups}

The result is more white space between neighboring elements than you have for the first or last item in the row.

With the examples you provided, I would say that the first one looks like a conscious design decision whereas the second example (Netflix) is probably more representative of the cumulative effect of uniform margins in a list.