Html 正确设置网格布局

我需要构建

单选按钮

，如下所示

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

{{l.description}
//其他部分

然后它看起来像下面

---

你能告诉我如何设计它看起来像

image 1

？

如果你能发布你的HTML和CSS，那么我很乐意为你的实际代码提供帮助。但是，原则上，你可以这样做

HTML

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

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