Ion-grid: How to merge multiple cells vertically. StackBlitz demo provided

@cabaro wrote:

Hi All,

Any idea about how to merge the “Header 2. Merge me!” cells? ( check StackBlitz demo ). Thanks in advance!

Output:

Captura de pantalla 2019-10-04 a las 9.49.05.png860×326 13.2 KB

Code:

                          <ion-grid>
                <ion-row>
                    <ion-col size="6" offset="6" class="header">
                            Header 1
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col offset="6" size="3" class="subheader" >
                        Subheader 1.A
                    </ion-col>
                    <ion-col size="3" class="subheader">
                        Subheader 1.B
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col size="3" class="header">
                            Header 2. Merge me!
                    </ion-col>

                    <ion-col size="3" class="subheader">
                            Subheader 2.A
                    </ion-col>
                    <ion-col size="3">
                            w
                    </ion-col>
                    <ion-col size="3" >
                            x
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col size="3" class="header">
                            Header 2. Merge me!
                    </ion-col>
                    <ion-col size="3" class="subheader">
                            Subheader 2.B
                    </ion-col>
                    <ion-col size="3" >
                            y
                    </ion-col>
                    <ion-col size="3">
                            Z
                    </ion-col>
                </ion-row>
            </ion-grid>

ion-grid{
  max-width: 400px;
}

ion-col {
  padding: 0;
  border: solid 1px #ddd;
  text-align: center;

}
ion-col > div{
  vertical-align: middle;
}

ion-row {
  justify-content: center;
  padding: 0;
  margin: 0;

}


.header{
  background-color: #f7f7f7;
}

.subheader{
  font-weight: bold;
}

Posts: 3

Participants: 2

Read full topic