html - CSS 网格行的增长比预期的要大

Question

我对使用 CSS 网格进行响应式设计很感兴趣，它看起来很有前途。我已经确定了我的尺寸如下(看看我是否可以让网格做我想做的事):

.product-page-container {
  display:grid;
  grid-template-columns:2fr 2fr;
  grid-template-rows:150px minmax(674px,675px)  minmax(724px,725px) minmax(599px,600px) minmax(399px,400px) 150px;
  grid-template-areas:
    "banner banner"
    "productHero productDetails"
    "video video"
    "features features"
    "meta meta"
    "footerBanner footerBanner"
}

在放置“minmax”时，我假设这会强制我的内容保持在这个大小内。在开发中，我网站的其余部分似乎根本不是这样。行的增长和收缩大大超过了这些限制或更少。我

我完全不知道如何实现这一目标。例如，我的功能区域有一个交换内容的脚本。一个内容 block 最终高度为 500px，下一个内容 block 最终高度为 1200px，并且网格扩展所以它仍然在“功能”区域中，只是功能区域已经扩展。

这就是网格的工作原理吗？

Answer 1

我无法观察您正在观察的内容。 super 丑陋的预览，我知道，但向下滚动到绿色 div。那是你的功能部分。左边的白色 div 高度为 500px，右边的白色 div 高度为 1200px(但你不会知道，因为它受限于 .features div 的大小。

.product-page-container {
  display:grid;
  grid-template-columns:2fr 2fr;
  grid-template-rows:150px 675px 725px 600px 400px 150px;
  grid-template-areas:
    "banner banner"
    "productHero productDetails"
    "video video"
    "features features"
    "meta meta"
    "footerBanner footerBanner"
}

.banner {
  grid-area: banner;
  background-color: black;
 }

 .product-hero {
  grid-area: productHero;
  background-color: red;
 }

 .product-details {
  grid-area: productDetails;
  background-color: purple;
 }

 .video {
  grid-area: video;
  background-color: blue;
 }

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

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

 .footer-banner {
  grid-area: footerBanner;
  background-color: brown;
 }

 .small-content,
 .large-content {
  display: inline-block;
  vertical-align: top;
  margin: 20px;
  width: 50px;
  background-color: white;
 }

 .small-content {
  height: 500px;
 }

 .large-content {
  height: 1200px;
 }

<div class="product-page-container">
  <div class="banner"></div>
  <div class="product-hero"></div>
  <div class="product-details"></div>
  <div class="video"></div>
  <div class="features">
    <div class="small-content"></div>
    <div class="large-content"></div>
  </div>
  <div class="meta"></div>
  <div class="footer-banner"></div>
</div>

如果没有更多细节，将很难复制和调试，但唉:

有一些原因为什么您的网格会以意想不到的方式运行(包括 <pre> 标签和大图像)。 Chris Coyier 在这里写了一篇关于这些问题以及如何解决它们的好文章:https://css-tricks.com/preventing-a-grid-blowout/

我觉得那篇文章 ^^ 可能包含您的解决方案。否则，请尝试为我们提供更多代码以从此处开始工作。祝你好运!