使用 CSS 网格时，我不想扩展某些网格区域

Question

我开始使用 CSS 网格。到目前为止，一切都很好。我希望某些网格区域在其他区域扩展时不扩展。这就是我现在拥有的

我首先设计移动设备，然后是桌面设备。桌面上的网格，如果您注意到，'album' 区域会随着正文展开而展开。我不想要那个。我希望区域 'album'、'credits'、'version' 保持高度，即使 '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

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

Answer 2

您可以像这样更改 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>

使用 CSS 网格时，我不想扩展某些网格区域

When using CSS grid, i don't want some grid areas to expand

html

css

css-grid