Ionic 2 / 3 响应式正方形网格答案

【问题标题】：Ionic 2 / 3 responsive grid of squaresIonic 2 / 3 响应式正方形网格
【发布时间】：2017-10-31 18:09:26
【问题描述】：

有没有办法用 ionic 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 值的情况下将每列的高度设置为与宽度相同？

【问题讨论】：

thepolyglotdeveloper.com/2015/03/…你可以从这里理解逻辑
我认为它不能解决我的问题，因为在这个例子中使用的图片是正方形。但是我不想用图片...
是的，但如果您不想使用没问题的图像，逻辑将很重要

标签： angular ionic-framework grid responsive

【解决方案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>

padding-top:48% 提出了保持 1:1 比例的诀窍

【讨论】：