使用CSS网格时，我不希望某些网格区域展开

Question

我开始使用CSS网格。到现在为止还挺好。我希望一些网格区域不会在其他区域扩展时扩展。 这就是我现在拥有的

我首先设计移动设备，然后是桌面设备。桌面上的网格，如果您注意到，“相册”区域会在主体扩展时展开。我不希望这样。我希望区域'专辑'，'信用'，'版本'保持高度，即使'body'或'comment'区域扩展。换句话说，当网格区域扩展时，其他区域的高度保持不变。

https://jsfiddle.net/e9n4ac5d/

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: "body" "album" "credit" "version" "comment";
}

@media screen and (min-width: 400px) {
  .grid {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "body album" "comment credit" "comment version";
  }
}

.body {
  grid-area: body;
  background-color: red;
}

.album {
  grid-area: album;
  background-color: pink;
}

.credit {
  grid-area: credit;
  background-color: green;
}

.version {
  grid-area: version;
  background-color: yellow;
}

.comment {
  grid-area: comment;
  background-color: #eee;
}

<div class="grid">
  <div class="body">body
    <br><br><br><br><br><br>
  </div>
  <div class="album">album</div>
  <div class="credit">credits</div>
  <div class="version">version</div>
  <div class="comment">comments</div>
</div>

Answer 1

您可以像这样更改HTML结构：

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas: "body" "album" "credit" "version" "comment";
}

@media screen and (min-width: 400px) {
  .right {
    grid-area: right;
  }
  .grid {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "body right" "comment right";
  }
}

.body {
  grid-area: body;
  background-color: red;
}

.album {
  grid-area: album;
  background-color: pink;
  height: 50px;
}

.credit {
  grid-area: credit;
  background-color: green;
  height: 50px;
}

.version {
  grid-area: version;
  background-color: yellow;
  height: 50px;
}

.comment {
  grid-area: comment;
  background-color: #eee;
}

<div class="grid">
  <div class="body">body
    <br><br><br><br><br><br>
  </div>
  <div class="right">
    <div class="album">album</div>
    <div class="credit">credits</div>
    <div class="version">version</div>
  </div>
  <div class="comment">comments</div>
</div>

Answer 2

只需设定固定的高度和宽度......使其不可展开且不可压缩......