Grid模板布局：同一列多元素顶部对齐实现问询

我正尝试使用grid-template-area构建适配移动端/桌面端的响应式Grid模板布局。移动端为单列布局，实现简单；桌面端需改为两列布局，其中第一列呈现效果如当前图所示，第二列需将所有元素顶部对齐、依次排列，让description紧跟title且无间距，同时所有盒子高度需保持动态。请问能否通过Grid实现该效果？

当前效果

预期效果

现有代码 #

CSS代码 #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.title {
  grid-area: title;
  min-height: 30px;
  background-color: green;
}

.description {
  grid-area: description;
  background-color: lightgreen;
  min-height: 300px;
}

.price {
  grid-area: price;
  background-color: teal;
  min-height: 30px;
}

.config {
  grid-area: config;
  background-color: purple;
  min-height: 150px;
}

.add {
  grid-area: add;
  background-color: red;
  min-height: 50px;
}

.carousel {
  grid-area: carousel;
  background-color: orange;
  min-height: 500px;
}

.features {
  grid-area: features;
  background-color: pink;
  min-height: 400px;
}

.specifications {
  grid-area: specifications;
  background-color: gray;
  min-height: 300px;
}

.related {
  grid-area: related;
  background-color: aqua;
  min-height: 400px;
}

.wrapper {
  display: grid;
  grid-template-areas: "title" 
                       "description"
                       "price"
                       "config"
                       "add"
                       "carousel"
                       "features"
                       "specifications"
                       "related";
  grid-template-rows: auto;
}
@media screen and (min-width: 600px) {
  .wrapper {
    grid-template-columns: 3fr 1fr;
    grid-template-areas: "carousel title"
                         "features description" 
                         "specifications price" 
                         "related config" 
                         ". add";
  }
}
.wrapper > div {
  display: flex;
  color: white;
  justify-content: center;
  align-items: center;
  font-size: 42px;
  padding: 12px;
  align-self: start;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="title">TITLE</div>
      <div class="description">DESCRIPTION</div>
      <div class="price">PRICE</div>
      <div class="config">CONFIG</div>
      <div class="add">ADD TO BASKET</div>
      <div class="carousel">CAROUSEL</div>
      <div class="features">KEY FEATURES</div>
      <div class="specifications">SPECIFICATIONS</div>
      <div class="related">RELATED PRODUCTS</div>
    </div>
  </body>
</html>

解决方案 #

可以通过Grid实现该效果，核心是让右侧元素统一归到第二列并自动堆叠，具体修改如下：

修改后的CSS代码 #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.title {
  grid-area: title;
  min-height: 30px;
  background-color: green;
}

.description {
  grid-area: description;
  background-color: lightgreen;
  min-height: 300px;
}

.price {
  grid-area: price;
  background-color: teal;
  min-height: 30px;
}

.config {
  grid-area: config;
  background-color: purple;
  min-height: 150px;
}

.add {
  grid-area: add;
  background-color: red;
  min-height: 50px;
}

.carousel {
  grid-area: carousel;
  background-color: orange;
  min-height: 500px;
}

.features {
  grid-area: features;
  background-color: pink;
  min-height: 400px;
}

.specifications {
  grid-area: specifications;
  background-color: gray;
  min-height: 300px;
}

.related {
  grid-area: related;
  background-color: aqua;
  min-height: 400px;
}

.wrapper {
  display: grid;
  grid-template-areas: 
    "title" 
    "description"
    "price"
    "config"
    "add"
    "carousel"
    "features"
    "specifications"
    "related";
  grid-template-rows: auto;
}

@media screen and (min-width: 600px) {
  .wrapper {
    grid-template-columns: 3fr 1fr;
    grid-template-areas: 
      "carousel ."
      "features ." 
      "specifications ." 
      "related .";
    grid-auto-flow: dense; /* 让右侧元素自动填充空白行 */
  }
  /* 统一指定右侧元素在第二列 */
  .title, .description, .price, .config, .add {
    grid-column: 2;
  }
}

.wrapper > div {
  display: flex;
  color: white;
  justify-content: center;
  align-items: center;
  font-size: 42px;
  padding: 12px;
  align-self: start;
}

关键修改说明 #

1. grid-auto-flow: dense：让Grid自动填充右侧列的空白行，确保右侧元素按HTML顺序从上到下堆叠；
2. 统一设置grid-column: 2：让所有右侧元素归到第二列，自然实现无间距紧跟的效果；
3. 保留align-self: start：确保右侧元素顶部对齐，不会被Grid行高拉伸；
4. 第一列区域配置：保持原有布局，元素高度依然动态适配内容。

这样调整后，桌面端就能实现你要的两列布局效果，移动端单列布局不受影响。

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