Set grid layout properly - html

Question

I need to structure the radio buttons as shown below.
image 1
I have tried as shown below.
.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>
Then it looks like below.
Can you tell me how to design it looks like image 1?

Answer 1

If you can post your HTML and CSS, then I'd be happy to help with your actual code. However, in principle, you can do something like this;
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;
}