центр сетки дочернего элемента 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>