I want to create grid withs cards that looks like on photo, every card have text in it.

What would be better to make , all square or rectangular cards ?

enter image description here

3 Answers 3


Rectangular. A square grid can create an optical illusion called the Hermann grid illusion. https://en.m.wikipedia.org/wiki/Grid_illusion

The squares of this size will not be readable for users, there is too much of them in the grid to keep users interested. I suggest you increase the size of cards and decrease the amount of cards per screen to 8 or 12 max. Consider some color coding to avoid cards looking homogenous.

  • 2
    False. Those illusions still exist in rectangular grids. And even in triangular grids. dl.dropboxusercontent.com/u/448525/keep/stackexchange/… Nov 30, 2015 at 14:41
  • 1
    Interesting, thanks. We were taught only the classic example of the square grid.
    – Zoe K
    Nov 30, 2015 at 15:20
  • 1
    Yeah they're the go-to example because they're the cleanest and easiest to see. But grids are not necessary. You'll see the same effect, but less strong, in a messy 'grid' ( dl.dropboxusercontent.com/u/448525/keep/stackexchange/… ) and even a bit in no discernible grid at all (dl.dropboxusercontent.com/u/448525/keep/stackexchange/…). It's caused by the same effect that makes those inverted color illusions work. They key points are object/gutter contrast and gutter width. Nov 30, 2015 at 17:10
  • Thanks for elaborating^^ Wow, that Voronoi blinking blows my mind!
    – Zoe K
    Nov 30, 2015 at 17:35
  • While we can all see this effect here, I don't personally recall ever noticing it on a site that uses real content in a card layout. We're looking at high-contrast images that intensify the illusion, not a real use of the design on a site or app. Picking square or rectangular doesn't matter—it should fit the existing aesthetic and constraints of your project.
    – Kip
    Nov 30, 2015 at 19:47

If you only place text inside the cards a rectangle is often more economic in terms of space.


download bmml source – Wireframes created with Balsamiq Mockups


A square grid feels nice and organized.

But as Martijn said, (small amounts of text) tend to be wider than they are tall. Look at google results, at the replies on this website, at the windows start menu, etcetera. So you'll get better results for text if you use rectangular grid.

My suggestion: use a square grid, but make text boxes double wide, or perhaps triple wide, depending on how many grid-squares you put on enter image description here

As for your image in your post, 7x7 is a weird number - but you probably just googled that as an example, right?

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.