离子2/3响应网格的正方形

Question

有没有办法用离子2/3创建一个响应式网格？

我是这样开始的：

<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>

如何在不使用固定px值的情况下将每列的高度设置为与宽度相同？

Answer 1

你可以用纯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>

保持比率为1：1的技巧由padding-top:48%

决定