CSS - Grid with perfect squares

Question

Need some help with the CSS for generating a grid of perfect squares. Div's look like this, but I'd like to have each of them look like a perfect square - not a rectangle. Setting width and height in css doesn't do it. :-\

<div class="square" /> ... <div class="square" /> <div class="linebreak" />

display:block does not work btw... http://jsfiddle.net/AYCkr/ — ina, Aug 05 '10 at 07:10

score 5 · Accepted Answer · answered Aug 05 '10 at 07:09

5

You need to combine these style rules to get what you need. The float property ensures they stack in a horizontal row, the block rule allows you to set the height and width of the element and the overflow hidden rule stops it from expanding with the content.

.square {
    float: left;
    width:200px;
    height:200px;
    display:block;
    overflow:hidden;
}

answered Aug 05 '10 at 07:09

Fenton

241,084
71
387
401

float left does it whew ! http://jsfiddle.net/AYCkr/1/ – ina Aug 05 '10 at 07:14

score 3 · Answer 2 · answered Jul 10 '12 at 14:34

3

Thanks to http://dinosaurswithlaserz.com/2011/07/18/fluid-squares-v2/ for pointing out it can be done with pure CSS and be fluid, like this:

.onesquare {

width: 30%;
margin: 0px 2% 0 0;
padding-bottom: 30%;
background-color: red;

}

answered Jul 10 '12 at 14:34

aroundtheworld

731
1
5
15

Starx · Answer 3 · 2010-08-05T07:11:10.887

1

Thats unusual

try something like this. It should work

.square {
   width:100px;
   height:100px;
   display:block;
   overflow:hidden;
   float:left;
}

See: http://jsfiddle.net/EyXpC/

edited Aug 05 '10 at 07:11

answered Aug 05 '10 at 07:01

Starx

77,474
47
185
261

unfortunately, block breaks the horizontal rows... – – ina Aug 05 '10 at 07:03
hahaha @ina, of course it does you have to float it. see the update – Starx Aug 05 '10 at 07:09

score 0 · Answer 4 · answered Aug 05 '10 at 06:57

0

Use display:block together with width and height attributes.

answered Aug 05 '10 at 06:57

o15a3d4l11s2

3,969
3
29
40

unfortunately, block breaks the horizontal rows... – ina Aug 05 '10 at 07:02

CSS - Grid with perfect squares

4 Answers4