Ion grid -> multiple rows one over eachother

Ionic Framework ionic-v3
1

hi,
i need to devide a row into few rows. it make one over each other but a
if you can see the blabla word under the time
cant manage to fix it:

  <ion-row class="homeRow firstRow">
            <ion-row class="transparentClockLine">
            <ion-label class="clock">{{ time }}</ion-label>
            </ion-row>
            
            <ion-row class="profile">
                <ion-label>blabla</ion-label>
            </ion-row>
        </ion-row>

image
1.png974×262 41.6 KB

2

is this what you want…? or is this what you dont want?
question is little confusing.

you may try putting nested <ion-row> in <ion-col>

3

this pic is what i dont want.

tried…didnt work
i use css top. but isnt there any better solution?

4

Why do you need to put 2 rows in another row, instead of separating the 2 rows like this?

<ion-row class="transparentClockLine">
  <ion-label class="clock">{{ time }}</ion-label>
</ion-row>
            
<ion-row class="profile">
  <ion-label>blabla</ion-label>
</ion-row>
5

because i then need to put another elements inside each row and deside each row supposed to be the best way to do it no?

7

ion grid is best used with row and column together to achieve a better result.
The code below should result what you want.

 <ion-row class="homeRow firstRow">
  <ion-col size="12">

    <ion-row class="transparentClockLine">
      <ion-col size="12">
        <ion-label class="clock">{{ time }}</ion-label>
      </ion-col>
    </ion-row>
            
    <ion-row class="profile">
      <ion-col size="12">
        <ion-label>blabla</ion-label>
      </ion-col>
    </ion-row>

  </ion-col>
</ion-row>