#panelb {
background: lightblue;
display: grid;
grid-template-columns: repeat(auto-fit, 300px);
}
.card {
background: gold;
}
.imgcard {
display: block;
width: 100%;
margin: 0 auto;
}
<div id='panelb'>
<div class='card'>
<img class='imgcard' src='imglink/01.jpg' alt='img'>
<div class='linktitle'>TITLE</div>
</div>
<div class='card'>
<img class='imgcard' src='imglink/02.jpg' alt='img'>
<div class='linktitle'>TITLE</div>
</div>
... and so on - about 50 cards
</div>
一切正常,但我希望panelb
始终以页面为中心,即动态宽度和相等的左/右边距。
我无法写display:inline-block;
,因为它已经是display:grid
。
同样margin: 0 auto
使宽度始终为100%或另一个给定宽度,而不管一行中cards
的数量。
任何帮助?
答案 0 :(得分:1)
使网格容器的父级成为具有居中属性的弹性容器。
body {
display: flex;
justify-content: center;
}
#panelb {
flex: 1; /* tells grid container to take full width of flex container */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 10px;
background: lightblue;
}
.card {
background: gold;
}
.imgcard {
display: block;
width: 100%;
margin: 0 auto;
}
&#13;
<div id='panelb'>
<div class='card'>
<img class='imgcard' src='imglink/01.jpg' alt='img'>
<div class='linktitle'>TITLE</div>
</div>
<div class='card'>
<img class='imgcard' src='imglink/02.jpg' alt='img'>
<div class='linktitle'>TITLE</div>
</div>
<div class='card'>
<img class='imgcard' src='imglink/02.jpg' alt='img'>
<div class='linktitle'>TITLE</div>
</div>
<div class='card'>
<img class='imgcard' src='imglink/02.jpg' alt='img'>
<div class='linktitle'>TITLE</div>
</div>
<div class='card'>
<img class='imgcard' src='imglink/02.jpg' alt='img'>
<div class='linktitle'>TITLE</div>
</div>
<div class='card'>
<img class='imgcard' src='imglink/02.jpg' alt='img'>
<div class='linktitle'>TITLE</div>
</div>
</div>
&#13;