First an admission: I'm not a graphic designer. So I'm posting this question here.

As per request, the purpose of the inner containers is to provide set of options to choose from. All the inner containers hold similar data & once one is clicked, it flips to show the smaller set of options as can be seen in the very first inner container.

Which one of the two containers (First Layout or Second Layout) looks better presentation wise? And may I ask for an explanation why? How can it be improved?

First Layout:

Flex Spacing Around

Second Layout:

enter image description here

  • 1
    Second. symmetric spacing is more pleasing. The first one goes all the way to being disturbing. Also, I am voting to close this question as too broad.
    – Alin
    Commented Mar 1, 2016 at 18:20
  • 3
    It depends. If the content are unified or completely related, the second is the way to go. If the left column is distinct from the right column then the first is better. We need more information as to what is helpful to be of much use Commented Mar 1, 2016 at 18:28
  • @ZachSaucier Thanks for the feedback, yes, the inner containers are related, they are a stack of options available to the user to choose from.
    – Kayote
    Commented Mar 1, 2016 at 18:43
  • 1
    Please use the edit button to update your question with the previous comment and any other details that you can offer.
    – Ryan
    Commented Mar 1, 2016 at 18:52
  • I'm also in the it depends camp. -- Option 1 if you want separation between left and right content, option 2 if you want content to be seen also as a whole.
    – Scott
    Commented Mar 2, 2016 at 3:43

1 Answer 1


If there is no distinction between the content of the left and right columns, in other words if they are all similar or completely unsimilar where two groups are not made out, then the second layout with equal gutter (spacing) size vertically and horizontally is better.

This is because space is used to help relate or disassociate things. If consistent space is used, the items are associated. If there are inconsistencies, in most cases it disassociates some from others.

In the case of your example, more vertical gutter makes it seem like there are two groups - those in the left and those in the right. Since this is not your intention, you should avoid this layout.

One other note is that it would likely be better to have a consistent vertical margin between the top of the section containing these tiles and the dot buttons below them. As is, it looks somewhat like there may be something missing or that there is more space than intended, but it is minor in comparison to having inconsistent gutter space among the elements themselves.

If you think there is too much empty space around the elements for some reason, you could fill it by making each tile larger or by adding some extraneous design elements which would give the page more style.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.