绝对正方形的响应网格

Question

I'm trying to create an responsive grid of absolutely defined squares. By that, I mean that I need the squares to be in certain positions within their parent element, and so when the page re-sizes I want the squares to scale with their parent but not to shift between lines.

Say for instance, I have a grid of 3x3 squares:

----------------
| A  | B  | C  |
----------------
| D  | E  | F  |
----------------
| G  | H  | I  |
----------------

I need the whole thing to be able to resize easily, with the rows and columns of the squares inside staying the same.

I've had a couple of tries at this, but I always run into problems getting the heights to work well.

If you have any ideas, they would be greatly appreciated!

John

Answer 1

May be you can use this?

Fiddle: http://jsfiddle.net/Preben/dkeccbwo/

I don't know if you are going to have text or images as content, so this is as far as I can take it right now. You of course need to adjust more to your liking and purpose:

<div class="myrow">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

<div class="myrow">
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
</div>

<div class="myrow">
  <div class="box">G</div>
  <div class="box">H</div>
  <div class="box">I</div>
</div>

CSS:

.myrow {width:100%;border:1px dashed grey; margin-bottom:10px;display:table;}
.box {width:29%;min-height:80px;float:left;margin:2%;background-color:#cecece;}

IN the div.box you can add square images that are set to be width:100% and then they will scale down and keep the aspect ratio.

OR you may like to use tables (yes, for some content and purposes tables are still worth to look into). For instance a Bootstrap table if you already use Bootstrap CSS: http://getbootstrap.com/css/#tables

Answer 2

 function resizeChild(){ var wid = $('.child:first').width(); $('.child').css('height', wid); } $(function(){ resizeChild(); $(window).resize(resizeChild); }); 

 .parent{ max-width: 900px; font-size: 0; } .child{ display: inline-block; font-size: 14px; width: 33.33%; text-align: center; border: 1px dotted #000; box-sizing: border-box; } .child::after{ content: ""; width: 1px; height: 100%; position: relative; display: inline-block; vertical-align: middle; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <div class="child">a</div> <div class="child">b</div> <div class="child">c</div> <div class="child">d</div> <div class="child">e</div> <div class="child">f</div> <div class="child">g</div> <div class="child">h</div> <div class="child">i</div> </div>