CSS Grid布局如何按类名调整特定列宽度实现响应式适配

实现方案 #

你无需修改现有HTML结构，仅需要新增CSS媒体查询规则即可实现需求，完整CSS代码如下：

.grid {
  display: grid;
  grid-template-columns: 80% 20%;
}

/* 小屏幕响应规则，768px为默认断点，可根据实际需求调整阈值 */
@media (max-width: 768px) {
  .grid {
    /* 小屏幕下网格改为2等分列 */
    grid-template-columns: repeat(2, 1fr);
  }
  /* 普通项目跨2列，占满整行宽度 */
  .grid-item {
    grid-column: span 2;
  }
  /* 特殊项目仅跨1列，每行自动排列2个，各占50%宽度 */
  .grid-item-special {
    grid-column: span 1;
  }
}

逻辑说明 #

• 大屏下保持原有80%+20%的两列布局不受影响
• 触发小屏幕断点后，网格底层改为2等宽列结构，通过grid-column属性控制不同类别的元素跨列数量，自动实现普通项独占一行、特殊项一行两个的效果

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