自定义页面使用栅格布局

能力免费版轻享版专业版专属版自定义页面不支持不支持支持支持未升级到新版信息架构的组织，请点此查看使用手册1. 操作步骤在应用管理界面，提供了两个创建自定义页面的入口1.1 通过【新建页面】下拉菜单创建左上角新建页面，在下拉菜单中选择【新建自定义页面(Beta)】，开始创建新建自定义页面1....

https://docs.aliwork.com/docs/yida_support/ui648w/ynk2lo

1. 使用场景

本例介绍一下在宜搭自定义页面中如何使用栅格布局实现 PC 端、Mobile 端做卡片列表展示。

2. 实现功能

2.1 创建自定义页面

2.2 配置页面效果

（1）配置变量

（2）父容器配置

自定义样式类绑定：

容器样式配置：

:root{
  grid-area: span 1 / span 1;
  display: grid;
  gap: 16px;
  cursor: pointer;
  padding: 16px;
}

.gridTemplateColumns_1 {
  grid-template-columns :repeat(1, minmax(0px, 1fr));
}

.gridTemplateColumns_2 {
  grid-template-columns :repeat(2, minmax(0px, 1fr));  
}

.gridTemplateColumns_3 {
  grid-template-columns :repeat(3, minmax(0px, 1fr));  
}

.gridTemplateColumns_4 {
  grid-template-columns :repeat(4, minmax(0px, 1fr));  
}

.gridTemplateColumns_5 {
  grid-template-columns :repeat(5, minmax(0px, 1fr)); 
}

.gridTemplateColumns_6 {
  grid-template-columns :repeat(6, minmax(0px, 1fr));
}

.gridTemplateColumns_7 {
  grid-template-columns :repeat(7, minmax(0px, 1fr));  
}

.gridTemplateColumns_8 {
  grid-template-columns :repeat(8, minmax(0px, 1fr));  
}

.gridTemplateColumns_9 {
  grid-template-columns :repeat(9, minmax(0px, 1fr));  
}

.gridTemplateColumns_10 {
  grid-template-columns :repeat(10, minmax(0px, 1fr));  
}