Create a responsive layout 3 x 3 grid of 9 circles

Question

I've been trying to create an HTML / CSS layout of 9 circles in a 3 x 3 grid.

I'd like the layout to be responsive so that the layout would sit centrally on a large screen (but not have any vertical scroll) and then scale down to sit nicely on tablet / mobile screens too.

This is a picture of the kind of thing I'm trying to achieve (minus the bottle in the bottom corner!)

enter image description here

I've put my very poor effort on codepen - Let's say I'm no CSS master.

This example has got a fixed width container so it's not responsive. When I try setting just a height all the circles get stretched.

Any help would be much appreciated.

Hard to be responsive when it's hard coded to 1000px wide. This is what you're looking for: http://stackoverflow.com/questions/12121090/responsively-change-div-size-keeping-aspect-ratio — cimmanon, Feb 27 '14 at 21:59

score 1 · Accepted Answer · answered Feb 27 '14 at 22:48

Well, as a pure CSS solution, you could use vh Viewport-percentage lengths for the #container to specify its dimensions base on the viewport height.

Here is my attempt to achieve this:

Sass version:

html { height: 100%; }

body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: hidden; /* Hide the vertical overflow */
}

#container {
  max-width: 90vh;    /* = 90% of the height of initial containing block */
  max-height: 90vh;
  margin: 5vh auto;
  position: relative;
  background-color: gold;
}

#main {
  height: 100%;
  width: 100%;

  .row {
    width: 100%;
    height: 33.33%;
    font: 0/0 a;    /* Hide the white space between inline(-block) elements */

    .circle {
      display: inline-block;
      vertical-align: middle;
      margin: 3%;
      width: 27.33%;
      padding-bottom: 27.33%;
      background-color: #333;
      border-radius: 50%;
    }
  }
}

WORKING DEMO. (Resize the panel/window horizontally and vertically)

I should note that it doesn't have a fully browser support, but it works on most modern web browsers.

Thanks so much, this is brilliant, you've even fixed the circle sizing and added some space between them. This will give me a great starting point to do what i need to do. — bradfields, Feb 28 '14 at 09:41

J. A. Streich · Answer 2 · 2014-02-27T22:28:34.463

0

http://jsfiddle.net/Tzx2E/ or http://jsfiddle.net/ZkD5v/

HTML:

<div id="grid">
  <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="row">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    </div>
  </div>
</div>

CSS:

.circle{border:1px solid black;border-radius:50%;width:33%;float:left;margin:0;padding:0;}
.row{clear:left;}

Either:

JS:

$('.circle').height($('.circle').width());

Or:

CSS:

.circle{padding-top:33%;}

edited Feb 27 '14 at 22:28

answered Feb 27 '14 at 22:09

J. A. Streich

1,683
10
13

The OP is not asking for a JS solution. – cimmanon Feb 27 '14 at 22:15
He doesn't explicitly say not to use JS either. While your mentioned padding solution is likely better, then you can't add content to the circles. Editing... – J. A. Streich Feb 27 '14 at 22:27
Thanks for your work @J.A.Streich I may end up using the other answer above, but i've had a look at your code and the way you did it and you've still taught me something so much appreciated. – bradfields Feb 28 '14 at 09:43

Create a responsive layout 3 x 3 grid of 9 circles

2 Answers2