使用 CSS 网格时，我不希望某些网格区域扩大答案

【问题标题】：When using CSS grid, i don't want some grid areas to expand使用 CSS 网格时，我不希望某些网格区域扩大
【发布时间】：2018-01-31 08:00:12
【问题描述】：

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

我首先设计移动设备，然后是桌面设备。桌面上的网格，如果你注意到的话，“相册”区域会随着正文的展开而扩大。我不想要那个。即使“正文”或“评论”区域扩大，我也希望“专辑”、“学分”、“版本”区域保持高度。也就是说，当一个网格区域扩大时，其他区域的高度保持不变。

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>

【问题讨论】：

“保持高度”是什么意思？查看您希望它的外观的草图会有所帮助。
@trembly 我更新了我的照片。也就是说，当一个网格区域扩大时，其他网格区域的高度保持不变。

标签： html css css-grid

【解决方案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>

【讨论】：

这个非常接近我要找的，但是当右侧区域之一扩大时，身体也会扩大。我的身体得到了非常难看的空白空间。我也尝试过使用 flex 没有成功。我认为好的旧浮动可能是唯一的解决方案......
我更改了一些 CSS。请检查更新的代码。我希望它对你有用
只为其他想要做同样事情的人，这是最后的 jsfiddle jsfiddle.net/7vqt7s9n。无论任何网格区域的高度是多少，都将完美移动！再次感谢您的帮助！

【解决方案2】：

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

【讨论】：