居中网格容器

时间:2017-12-11 15:48:27

标签: html css css3 css-grid

#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的数量。

任何帮助?

1 个答案:

答案 0 :(得分:1)

使网格容器的父级成为具有居中属性的弹性容器。

&#13;
&#13;
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;
&#13;
&#13;

jsFiddle demo