0

This is going to be difficult to explain but hopefully there will be a CSS ninja or two who can help me out.

Basically, I want to create a grid of square DIVs (imagine the Windows 7 phone metro interface), which stretches to fit the screen using percentages and has equal gaps horizontally and vertically between the squares.

It sounds quite easy but I really can't work it out.

Let me give an example. If the screen is 1000px wide and has 5 squares horizontally then I could make each one about 18% wide (180px each, total 90%), leaving 10% for the gaps between them but...

1) How to float each DIV so that there is no gap on the left or right of the screen but 2.5% gap horizontally between each square?

2) How to create a proportional vertical gap to match the horizontal gap between squares as the screen is resized?

3) How to ensure that each DIV remains a square, so the height is exactly proportional the the width which is a percentage of the width of it's container.

Am I thinking about this all wrong? Very confused.

Any help would really be appreciated.

jonhobbs
  • 26,684
  • 35
  • 115
  • 170

2 Answers2

0

The answer I found in the end was to use a transparent square image. If you make it x pixels wide then it will automatically be resized by the browser to make it x pixels tall. Obviously it's containing div will also scale accordingly :)

jonhobbs
  • 26,684
  • 35
  • 115
  • 170
0

I would use a grid system, something like SUSY with media queries.

Basically you want a responsive grid, here are some examples:

  • Golden Grid System
  • 1140px
  • LESS
  • Columnal
  • inuitCSS
  • Susy
  • Semantic
Mahmoud Gamal
  • 78,257
  • 17
  • 139
  • 164
leopic
  • 2,958
  • 2
  • 27
  • 42