1

I'm trying to create a grid of responsive squares without js. I came across this great solution:

Grid of responsive squares

Now I'm trying to put that grid into a container div, so that the width/height of each square will be derived from the container's width/height- with no luck- the squares seem to be overflow the container, as can be seen here:

https://jsfiddle.net/MpXYr/593/

<div style="height:50px;background:blue"><!--sqaures--></div>

What am I missing?

Community
  • 1
  • 1
Nir Smadar
  • 357
  • 2
  • 5
  • 15
  • Do you want the container to get bigger because of the content, or the other way around? – Kevin Grabher Mar 26 '15 at 16:13
  • How do you expect them to derive from the container if they are percentage-based while your container's height is fixed at 500px? – Bruno Toffolo Mar 26 '15 at 16:14
  • I want to be able to change the container size, and then the squares size will automatically change accordingly. – Nir Smadar Mar 26 '15 at 16:16
  • 2
    @NirSmadar If you read about the way this works from the answer you linked to, you'll see it is all based on the width of the container. – James Montagne Mar 26 '15 at 16:17
  • @BrunoToffolo that was just a quick&dirty example- in fact the container should be percentage based also. But still, I can't see why it should matter- if the container has a specific size, the percentage-based squares should accommodate accordingly- or am I wrong? – Nir Smadar Mar 26 '15 at 16:18
  • @JamesMontagne Thanks- that's it! can't believe I missed that one.. – Nir Smadar Mar 26 '15 at 16:21

1 Answers1

0

If I'm understanding your problem correctly HTML isn't intelligent enough to have one div look at another and have the same height. When I've needed to do the same thing I've used JavaScript like Match Height. Then to get your divs (with the class of "square") to have the same heights you'd reference the script:

<script src="js/jquery.matchHeight-min.js"></script> <!-- put this on your server and change relative path -->

Then call the function .matchHeight and the class or id you want to have the same height:

<script>
$( document ).ready(function() {

    $(function() {
        $('.square').matchHeight(); /* make all squares have the same height */
    });
});

Good luck.

Erik Wallace
  • 21
  • 3