Square columns in bootstrap [closed]

Question

I'm trying to create a grid of squares to provide some navigation features.

I have it working with js, but i don't like that solution. I'm working with bootstrap 3

<div class="container">
<div class="row">
    <div class="col-xs-4" style="background-color: lightgray"></div>
    <div class="col-xs-4" style="background-color: lightgreen"></div>
    <div class="col-xs-4" style="background-color: lightgray"></div>
    <div class="col-xs-4" style="background-color: lightgreen"></div>
    <div class="col-xs-4" style="background-color: lightgray"></div>
    <div class="col-xs-4" style="background-color: lightgreen"></div>
</div>
</div>

var divs = $(".row > div");
var width = divs.width();
divs.height(width)

How can I achieve it only with css?

jsfiddle

Answer 1

You can use this trick: https://mademyday.de/height-equals-width-with-pure-css/

Here is a working fiddle: https://jsfiddle.net/65mhv1cp/

basically, you can add a class to your squares, call it square

<div class="row">
    <div class="col-xs-4 square" style="background-color: lightgray"></div>
    <div class="col-xs-4 square" style="background-color: lightgreen"></div>
    <div class="col-xs-4 square" style="background-color: lightgray"></div>
    <div class="col-xs-4 square" style="background-color: lightgreen"></div>
    <div class="col-xs-4 square" style="background-color: lightgray"></div>
    <div class="col-xs-4 square" style="background-color: lightgreen"></div>
</div>

The CSS would be:

.square:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}

Read more in the link to understand how/why this works.