Question

首先，对我普遍缺乏知识以及我显然犯下的任何明显错误表示歉意！

我在获取嵌套网格以在最大宽度的容器中显示图像时遇到麻烦。一旦应用自动页边距使内容位于中心位置，所有内容都将压缩到单个列中。如果宽度是固定的，则可以解决此问题，但是我当然希望它与其他网站一起在较小的屏幕上缩小。

由于我希望我的标题/导航栏的固定大小大于下面的主要内容区域的大小，这可能会使情况变得复杂。我需要主要内容区域为950px，同时保持1200px标头/导航。

这是当前网站的链接，问题出在“世界”页面上。 www.jamesofgalendar.com

.grid {
display: grid;
grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
grid-template-rows: auto;
max-height: auto;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
overflow: hidden;}

.nav {
grid-column: 1 / 5;
grid-rows: 1;
max-width: 1200px;
max-height: 294px;
vertical-align: bottom;
padding: 0px;
display: table-cell;}

.picture-grid {
grid-column: 1 / 5;
grid-rows: 2;
display: grid;
max-width: 950px;
grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
grid-gap: 15px;
grid-row-gap: 15px;
background-color: #FF0;}

.grid-box{
width: 100%;
min-width: 0;}


<div class="grid">
<div class="nav">rollover images</div>

<div class="picture-grid">
<div class="grid-box"><img src="../images/book covers/template1.png" /></div>
<div class="grid-box"><img src="../images/book covers/template2.png" /></div>
<div class="grid-box"><img src="../images/book covers/template3.png" /></div>
<div class="grid-box"><img src="../images/book covers/template1.png" /></div>
<div class="grid-box"><img src="../images/book covers/template2.png" /></div>
<div class="grid-box"><img src="../images/book covers/template3.png" /></div>
</div>
</div>

Answer 1

对于.picture-grid中的Flexbox样式来说，这似乎是一项好工作。您将.grid容器设置为属性justify-items: center，然后将display的{{1}}属性更改为.picture-grid，并用替换某些网格样式选项弹性选项。这是获得您认为正在寻找的结果的示例：

flex

有关Flexbox的更多信息，请参见W3Schools这篇文章：

https://www.w3schools.com/css/css3_flexbox.asp

嵌套网格的问题（最大宽度阻止子元素填充div）

1 个答案: