居中网格容器

Question

#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 始终以页面为中心，即具有动态宽度和相等的 left/right 边距。

我不能写 display:inline-block; 因为它已经是 display:grid.

此外，margin: 0 auto 使其宽度始终为 100% 或其他给定宽度，无论一行中有多少 cards。

有什么帮助吗？

Answer 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;
}

<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>

居中网格容器

Centering a grid container

html

css

css-grid

jsFiddle demo