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”时，我认为这将迫使我的内容保持在此尺寸之内。在开发过程中，我网站的其余部分似乎根本不是这种情况。行的增长和收缩大大超过了这些限制或更少。我

我对如何实现这一目标感到迷茫。例如，我的功能区域有一个脚本，用于交换内容。一个内容块的高度最终为500px，下一个内容块的高度最终为1200px，并且网格扩展，因此它仍位于“功能”区域，只是功能区域已扩展。

这就是网格的工作方式吗？

Answer 1

我在观察您所观察的内容时遇到麻烦。我知道超级丑陋的预览，但向下滚动到绿色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/

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

CSS网格行越来越大然后预期

1 个答案: