移动端视图下调整Grid Template Columns布局问题求助

你可以通过CSS媒体查询结合Grid布局的特性来实现移动端的布局调整，以下是两种简洁有效的方案：

方案一：使用Grid模板区域（直观易维护） #

这种方式通过定义网格区域，在不同屏幕尺寸下切换区域排列顺序，代码可读性更强：

.grid-container {
  display: grid;
  /* 桌面端布局：Box1占左两列两行，Box3占右一列两行，Box2占左两列第三行 */
  grid-template-areas: 
    "box1 box1 box3"
    "box1 box1 box3"
    "box2 box2 box2";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 1rem;
  gap: 1rem;
}

.grid-item {
  padding: 1rem 3rem;
  font-size: 1.2rem;
  font-family: cursive;
  color: #e6c037;
  background-color: #784367;
  text-align: center;
}

.item-1 {
  grid-area: box1;
}

.item-2 {
  grid-area: box2;
}

.item-3 {
  grid-area: box3;
}

/* 移动端断点，可根据需求调整宽度值 */
@media (max-width: 768px) {
  .grid-container {
    /* 移动端改为单列，调整区域顺序 */
    grid-template-areas: 
      "box1"
      "box3"
      "box2";
    grid-template-columns: 1fr;
    grid-template-rows: auto; /* 自动适配内容高度 */
  }
}

方案二：使用order属性调整元素顺序 #

如果不想重构网格结构，也可以通过order属性直接调整元素的显示顺序：

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 1rem;
  gap: 1rem;
}

.grid-item {
  padding: 1rem 3rem;
  font-size: 1.2rem;
  font-family: cursive;
  color: #e6c037;
  background-color: #784367;
  text-align: center;
}

.item-1 {
  grid-row: 1 / 3;
  grid-column: 1 / 3;
}

.item-2 {
  grid-column: 1 / 3;
}

.item-3 {
  grid-row: 1 / 3;
  grid-column: 3 / 4;
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  /* 重置所有元素的行列定位 */
  .item-1, .item-2, .item-3 {
    grid-row: auto;
    grid-column: 1;
  }

  /* 通过order属性调整显示顺序 */
  .item-1 { order: 1; }
  .item-3 { order: 2; }
  .item-2 { order: 3; }
}

注意事项 #

• 媒体查询的断点（示例中用768px）可根据你的目标设备灵活调整，比如改为600px适配更小的手机屏幕。
• 两种方案都能保留桌面端原有布局，仅在移动端切换为需求的顺序。

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