如何实现CSS Grid响应式布局：移动端优先展示block3并竖排

你可以通过媒体查询结合CSS Grid的order属性（或直接指定网格行位置）来实现这个需求。核心思路是在小屏视口下切换为单列布局，并调整区块的排列顺序。

修改后的完整代码 #

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 600px;
  width: 100%
}

.container div {
  color: #fff;
  text-align: center;
}

.block1 {
  grid-row: 1 / 5;
  grid-column: 1 / 3;
  background-color: green;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.block2 {
  grid-row: 1 / 3;
  grid-column: 3 / 3;
  background-color: blue;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 300px;
}

.block3 {
  grid-row: 3 / 5;
  grid-column: 3 / 3;
  background-color: coral;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 300px;
}

/* 响应式适配：最大宽度768px */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr; /* 切换为单列布局 */
    height: auto; /* 高度自适应，避免固定高度导致内容溢出 */
  }

  .block1, .block2, .block3 {
    grid-column: 1; /* 所有区块占满单列 */
    grid-row: auto; /* 取消大屏下的行跨度设置，让网格自动分配位置 */
  }

  .block3 {
    order: -1; /* 将block3的排列优先级设为最高，置于首位 */
  }
}

<div class="container">
  <div class="block1"></div>
  <div class="block2"></div>
  <div class="block3"></div>
</div>

原理说明 #

1. 媒体查询触发时机：当视口宽度≤768px时，应用小屏布局规则。
2. 单列布局切换：将grid-template-columns改为1fr，让容器仅显示一列。
3. 重置网格位置：取消大屏下的grid-row和grid-column固定跨度，让每个区块自动适配单列。
4. 调整排列顺序：通过order: -1让block3在网格项目中优先排列（默认所有项目order为0，负数会排在正数/0前面）。

如果不想用order属性，也可以直接指定每个区块的网格行位置，效果一致：

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
    height: auto;
    grid-template-rows: repeat(3, 300px); /* 固定每行高度，按需调整 */
  }

  .block1 {
    grid-column: 1;
    grid-row: 2; /* 放在第二行 */
  }

  .block2 {
    grid-column: 1;
    grid-row: 3; /* 放在第三行 */
  }

  .block3 {
    grid-column: 1;
    grid-row: 1; /* 放在第一行（首位） */
  }
}

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