如何用CSS Grid实现窗口小于990px时按钮列自动下移各占一整行

更优实现方案 #

有两种更精简的实现方式，可减少冗余代码、降低后续维护成本： #

方案1：精简现有grid-template-areas写法

你的大屏布局中前两行的区域定义、grid列数、gap值在小屏下没有变化，媒体查询里不需要重复声明，只需要覆盖变动的grid-template-rows和grid-template-areas即可：

.addBasketPopup {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 50px 125px 60px;
  gap: 2px;
  grid-template-areas: 
    ". head head head head head head head head head head close" 
    "img img prod prod prod prod prod prod price price price price" 
    "buttonleft buttonleft buttonleft buttonleft buttonleft buttonleft buttonright buttonright buttonright buttonright buttonright buttonright";
}

@media only screen and (max-width: 990px) {
 .addBasketPopup {
   background-color: red;
   /* 仅覆盖变动的行配置和区域定义 */
   grid-template-rows: 50px 125px 60px 60px;
   grid-template-areas: 
    ". head head head head head head head head head head close" 
    "img img prod prod prod prod prod prod price price price price" 
    "buttonleft buttonleft buttonleft buttonleft buttonleft buttonleft buttonleft buttonleft buttonleft buttonleft buttonleft buttonleft"
    "buttonright buttonright buttonright buttonright buttonright buttonright buttonright buttonright buttonright buttonright buttonright buttonright";
 }
}

方案2：无需重写grid-template-areas的极简实现

直接通过调整按钮的列跨度实现换行占满整行，不需要修改整体的grid区域定义，代码量更少：

.addBasketPopup {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 50px 125px 60px;
  gap: 2px;
  grid-template-areas: 
    ". head head head head head head head head head head close" 
    "img img prod prod prod prod prod prod price price price price" 
    "buttonleft buttonleft buttonleft buttonleft buttonleft buttonleft buttonright buttonright buttonright buttonright buttonright buttonright";
}

/* 原有代码已经给两个按钮绑定了grid-area，示例如下：
.button-left { grid-area: buttonleft; }
.button-right { grid-area: buttonright; }
*/

@media only screen and (max-width: 990px) {
 .addBasketPopup {
   background-color: red;
   /* 新增一行放第二个按钮 */
   grid-template-rows: 50px 125px 60px 60px;
 }
 /* 两个按钮都占满全部12列，自动换行 */
 .button-left, .button-right {
   grid-column: 1 / -1;
 }
}

这种方案的优势是不需要重复定义整组grid-template-areas，后续如果修改前两行的布局，只需要改一次公共部分的定义即可，不需要同步修改媒体查询里的重复代码。

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