使用CSS调整WordPress中datagrid列布局 实现移动端展示2列

移动端datagrid调整为2列布局CSS实现方案 #

根据你提到的布局需求，可通过以下CSS代码实现：

若你的datagrid使用Grid布局

/* 适配767px及以下宽度的移动设备，可按需调整断点数值 */
@media only screen and (max-width: 767px) {
  /* 替换为你页面中datagrid列表容器的实际类名 */
  .datagrid-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important; /* 可自定义调整两列之间的间距 */
  }
  /* 可选：调整卡片样式避免内容溢出 */
  .datagrid-container .datagrid-item {
    width: 100% !important;
    margin: 0 !important;
  }
}

若你的datagrid使用Flex布局

@media only screen and (max-width: 767px) {
  /* 替换为你页面中datagrid列表容器的实际类名 */
  .datagrid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  /* 替换为你页面中列表卡片的实际类名 */
  .datagrid-container .datagrid-item {
    width: calc(50% - 6px) !important; /* 6px为两列总间距，可按需调整 */
    margin-bottom: 15px !important;
  }
}

• 如果你的自定义CSS加载优先级高于站点原有样式，可以去掉代码中的!important标识，避免样式权重过高影响后续调整
• 你可以根据站点实际的移动端适配规则，修改max-width的断点数值，比如部分站点会用576px作为移动端适配断点

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