如何自定义ion-grid实现24列，设置--ion-grid-columns无效果怎么解决

问题原因 #

你原来的配置未生效是因为仅给ion-grid设置了自定义列数变量，但ion-col的宽度计算默认还是基于全局12列的规则，没有适配新的24列配置。

正确实现方式 #

方式1：单网格局部配置24列（仅当前grid生效） #

HTML代码

<ion-grid class="myGrid">
  <ion-row>
    <!-- 共24个ion-col -->
    <ion-col>Example</ion-col>
    <ion-col>Example</ion-col>
    <!-- 剩余22个ion-col同理 -->
  </ion-row>
</ion-grid>

CSS代码

ion-grid.myGrid {
  --ion-grid-columns: 24;
}
/* 让所有子列自动适配24列等分宽度 */
ion-grid.myGrid ion-col {
  flex: 0 0 calc(100% / var(--ion-grid-columns));
  max-width: calc(100% / var(--ion-grid-columns));
}

如果需要给不同列设置不同宽度，直接给对应ion-col添加size属性即可，比如占3列宽度就写<ion-col size="3">，数值范围1-24。

方式2：全局配置24列（所有网格默认生效） #

如果项目所有网格都需要用24列，直接在全局样式文件（通常为variables.css/global.css）中添加如下代码即可，不需要单独给每个grid加自定义类：

:root {
  --ion-grid-columns: 24;
}

注意事项 #

• 该配置仅支持Ionic v5及以上版本，更低版本需要自行通过flex布局手动实现列宽规则
• 如果样式未生效，可检查是否有更高优先级的全局样式覆盖了变量配置

内容的提问来源于stack exchange，提问作者super_th_91