Square columns inside grid [Solved]

Ionic Framework
1

I’m trying to make square columns, the problem is that I don’t know how to set the height of the column equal to the width of it.

This is the html:

<ion-grid>
  <ion-row>
    <ion-col size="6">
      <ion-card>
      </ion-card>
    </ion-col>
    <ion-col size="6">
      <ion-card>
      </ion-card>
    </ion-col>
  </ion-row>
</ion-grid>

How can I set the scss values of the column to make it square?

ion-col{
  height: ?;
}
2

its up to you
50px * 50px
Xpx * Xpx

width and height
for EX :
ion-col{
height: 50px;
width :50px
}

there is many ways to do that try to read css codes and html

3

Thanks, maybe I did not explain clearly my idea.

I want the columns to have a size (width technically) of 6, and the height to be the same size in pixels as the width.

4

may be you can set the height to 50%
because
the col total 12 = 100%
the col-6 =50%
i hope thats help

5

I think the way here is to dynamically get the width of the col in ts and then set the height to the same Value

6

This is the solution:

var aaa = document.getElementById('AAA');
document.getElementById("AAA").style.height = aaa.offsetWidth.toString()+"px"