正确设置网格布局

Question

我需要构建radio buttons，如下所示。

图片1

我尝试过如下所示。

html的

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

然后它看起来像下面。

你能告诉我如何设计它看起来像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;
}