グリッドレイアウトを正しく設定する

Question

radio buttonsを以下のように構成する必要があります。

画像1

以下に示すように、私はしようとしています。

<ion-row> 
     <ion-col col-6> 
     <ion-grid radio-group formControlName="location"> 
      <ion-row> 
       <ion-col col-12> 
        <ion-item *ngFor="let l of locations;let index = index"> 
         <ion-label class="custom-radio"> 
          <ion-radio value="{{index}}"></ion-radio> 
           <i class="{{l.icon}}"></i><br/> {{l.description}} 
         </ion-label> 
        </ion-item> 
       </ion-col> 
      </ion-row> 
      </ion-grid> 
     </ion-col> 

    <ion-col col-6> 
    //other part   
    </ion-col> 
</ion-row> 

.htmlのは、それから、以下のようになります。

あなたはそれがimage 1どのように見えるかの設計を教えすることはできますか？

Answer 1

あなたのHTMLとCSSを投稿できる場合は、実際のコードをお手伝いします。しかし、原則として、このようなことをすることができます。

HTML

<div class="ion-item"> 
    <i class="l-icon"></i> 
    <span class="l-description">Text below the image</span> 
</div> 

CSS

.ion-item { 
    vertical-align: top; 
    display: inline-block; 
    text-align: center; 
    width: 60px; 
} 
.l-icon { 
    width: 50px; 
    height: 50px; 
} 
.l-description { 
    display: block; 
}