Центрирование контейнера сетки

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 всегда быть в центре страницы, то есть с динамической шириной и равными левыми / правыми полями.

Я не могу писать 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>

jsFiddle demo