Pure CSS responsive square
Responsive CSS square. No JavaScript / jQuery:
HTML code:
<div class="square"> </div>
CSS code:
.square {width: 10%; height: 0; padding-bottom: 10%;}
Width: 10% makes the square div to be 10% of the parent element's width. Height: 0 eliminates any height the element may have, letting padding-bottom: 10% to make it exactly equal to the width. So each time the width of the parent container is changed, the element's size gets recalculated.
CSS grid with responsive square cells
Square cell 1
Square cell 2
Square cell 3
Square cell 4
Square cell 5
Square cell 6
Square cell 7
Square cell 8
Browser support
- Windows
- Internet Explorer 8.0+
- Firefox 1.0+
- Google Chrome
- Opera 4.0+
- Safari 3.1+
- SeaMonkey 1.0+
- Mozilla 0.6+
- Netscape 6.01+
- Linux
- Firefox 1.0+
- Google Chrome / Chromium
- Opera 5.0+
- SeaMonkey 1.0+
- NetSurf 3.0+
- Hv3
- Mozilla 0.6+
- Netscape 6.01+