イオン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> 

？

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%