CODEWITHSUNDEEP
javascripthtmlcss
John W
John W

Reputation: 199

Responsive grid of absolute squares

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

Upvotes: 1

Views: 157

Answers (2)

Preben
Preben

Reputation: 1277

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;}

enter image description here

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

Upvotes: 1

Balaji Viswanath
Balaji Viswanath

Reputation: 1684

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>

Upvotes: 0

Related Questions