Центр сетки дочернего элемента div без выравнивания текста

Question

Я использую display:grid для моего контейнера Div. В этом контейнере у меня есть некоторые предметы, которые должны хранить их text-align:left но я хочу, чтобы их родители были в центре.

#grid {
  display: grid;
  grid-template-columns: calc(50% - 50px) calc(50% - 50px);
  grid-gap: 50px;
}

.gridItem {
  max-width: 300px;
  background: red;
}

<div id="grid">

  <div class="gridItem">
    <img src="url">
    <p>
      Item 1
    </p>
  </div>

  <div class="gridItem">
    <img src="url">
    <p>
      Item 2
    </p>
  </div>

  <div class="gridItem">
    <img src="url">
    <p>
      Item 3
    </p>
  </div>

  <div class="gridItem">
    <img src="url">
    <p>
      Item 4
    </p>
  </div>

</div>

Поэтому я хочу, чтобы центр .gridItem в сетке, но я не хочу использовать text-align:center потому что дети .gridItem не должен быть центрирован.

Я старался align-items: center за #grid а также align-self:center за .gridItem но это не помогло.

Как я могу добиться этого?

Answer 1

Я бы посоветовал добавить ширину (или max-width) в #grid и, возможно, добавить схему, по крайней мере, временно для тестирования. Если ширина сетки равна 100%, родительский элемент не будет отображаться по центру, и вы не увидите эффекта margin:0 auto (что бы центр сетки). Если после просмотра центрированной сетки с контуром вы хотите расширить элементы сетки, чтобы получить более "центрированный" вид, сделайте это.

Смотри фрагмент

body{
width:100%}

#grid {
  width: 70%;
  display: grid;
  grid-template-columns: calc(50% - 50px) calc(50% - 50px);
  grid-gap: 50px;
  margin:0 auto;
  outline: 1px solid #000000;
}

.gridItem {
  max-width: 300px;
  background: red;
}

<div id="grid">

  <div class="gridItem">
    <img src="url">
    <p>
      Item 1
    </p>
  </div>

  <div class="gridItem">
    <img src="url">
    <p>
      Item 2
    </p>
  </div>

  <div class="gridItem">
    <img src="url">
    <p>
      Item 3
    </p>
  </div>

  <div class="gridItem">
    <img src="url">
    <p>
      Item 4
    </p>
  </div>

</div>