Styles not working on ios

[sbdm05]

Hello,
i use the grid to display boxes next to each other

test

test2

test3

test4

it should be like this :

here the css in this component:

.col-tab {
  display: flex;
  background-color: green;
  border: solid 2px #fff;
  text-align: center;
  color: white;
  height: 6rem;
  align-items: center;
  justify-content: center;
  width: 120px;
  font-weight: 900;
  border-radius: 10px;
}

a {
  text-decoration: none;
  color: white;
}

Thank you very much for your help

[Hills90210]

ion-grid | Ionic Documentation

[sbdm05]

Thank you for the reply.
In standalone components with angular, It seems that i need to import each tag i am using like so :

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.page.html',
  styleUrls: ['./home-page.page.scss'],
  standalone: true,
  imports: [
    IonicModule,
    CommonModule,
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonButtons
  ],
})

but then,i have an error in the console (only in the web, the app compiles fine for xcode) saying :

to resolve this i had to remove the IonicModule import

// import { IonicModule } from '@ionic/angular';
import { IonContent, IonHeader, IonTitle, IonToolbar, IonButtons } from '@ionic/angular/standalone';

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.page.html',
  styleUrls: ['./home-page.page.scss'],
  standalone: true,
  imports: [
    // IonicModule,
    CommonModule,
    FormsModule,
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonButtons
  ],
})

then, it works on the web and on the emulator (ios, iphone15).

Is it the common practice ?

Please advise,

Thank you very much