Square columns inside grid [Solved]

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-col size="6">
    <ion-col size="6">

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

  height: ?;

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

width and height
for EX :
height: 50px;
width :50px

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

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.

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

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

This is the solution:

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