我对使用 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,并且网格扩展所以它仍然在“功能”区域中,只是功能区域已经扩展。
这就是网格的工作原理吗?
最佳答案
我无法观察您正在观察的内容。 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/
我觉得那篇文章 ^^ 可能包含您的解决方案。否则,请尝试为我们提供更多代码以从此处开始工作。祝你好运!
关于html - CSS 网格行的增长比预期的要大,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56191606/