Ionic 2 / 3 responsive grid of squares

Question

Is there a way to create a responsive grid with ionic 2 / 3 that looks like this?

I started like this:

<ion-grid>
    <ion-row>

        <ion-col col-6 *ngFor="let s of squares">

            <div style="text-align: center; padding: 10px; background-color: #888">
                1
            </div>

        </ion-col> 

    </ion-row>
</ion-grid>

How can I set the height of each column identically to the width without using fixed px-values?

Answer 1

You can do it in pure CSS :

div {
    background:grey;
    width:48%;
    padding-top:48%;
    float: left;
    margin:1%;
}

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

The trick to keep the ratio 1:1 is made by padding-top:48%