Take the 2-minute tour ×

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:

Image App Windows 8 NetFlix

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: enter image description here

And not so?

enter image description here

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

share|improve this question
I'm not really clear on what your question specifically is? Are you asking if version 'B' with symmetric margins is better than A? What is the relationship to the overlapping-type images in your first image? I can't see the specific question that you want answered here. –  JonW Sep 21 '12 at 23:27
Actually is no specific question. It is open to some more general concept. When to use X, or when to use Y, or when to use Z? Why? Is there any rule of User Experience for stacking items like this? –  J. Lennon Sep 22 '12 at 0:28
add comment

3 Answers

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
I understand your point. Well placed. Although there are still many unanswered questions. –  J. Lennon Sep 20 '12 at 0:20
add comment

Your Answer


