Центрировать элемент внутри grid сетки

Question

Как можно центрировать элемент внутри грид сетки (если он один, а сетка рассчитана на несколько)? Смысл следующий: у родителя может быть 3 элемента и тогда всё отлично. Но если элементов меньше 3х, они прижимаются к левому краю. Как можно сохранить гриды и при этом центрировать элементы, применив нечто вроде justify-content: center?

.content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 300px;
  border: 1px solid #000;
}

.block {
  width: 50px;
  height: 100px;
  margin: 15px;
  border: 1px solid #000;
}

<div class="content">
  <div class="block"></div>
</div>

Answer 1

Может такой вариант ))

P.S: justify-content: center как раз и нужно использовать

.content {
  display: grid;
  grid-template-columns: repeat(3, auto);
  max-width: 300px;
  border: 1px solid #000;
  justify-content: center;
}

.block {
  width: 50px;
  height: 100px;
  margin: 15px;
  border: 1px solid #000;
}

<div class="content">
  <div class="block"></div>
  <div class="block"></div>
</div>

Answer 2

.content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 300px;
  border: 1px solid #000;
}

.block {
  width: 50px;
  height: 100px;
  border: 1px solid #000;
  grid-row: 1 / -1;
  grid-column: 1 / -1;
  margin: auto;
}

<div class="content">
  <div class="block"></div>
</div>

Answer 3

Извращение какое-то...

section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  --gap: .5em;
  padding: var(--gap);
  gap: var(--gap);
  border: 1px solid;
  background: antiquewhite;
}

section + section {
  margin-top: 1em;
}

div {
  position: relative;
  height: 1em;
  background: silver;
}

div:nth-child(3n - 2):last-child {
  left: calc(100% + var(--gap));
}

div:nth-child(3n - 2):nth-last-child(2),
div:nth-child(3n - 1):last-child {
  left: calc(50% + var(--gap) / 2);
}

<section>
  <div></div>
</section>

<section>
  <div></div>
  <div></div>
</section>

<section>
  <div></div>
  <div></div>
  <div></div>
</section>

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

Answer 4

Через flex гораздо проще:

section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  --gap: .5em;
  padding: var(--gap);
  gap: var(--gap);
  border: 1px solid;
  background: antiquewhite;
}

section + section {
  margin-top: 1em;
}

div {
  flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
  height: 1em;
  background: silver;
}

<section>
  <div></div>
</section>

<section>
  <div></div>
  <div></div>
</section>

<section>
  <div></div>
  <div></div>
  <div></div>
</section>

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

БЛОГ НА HUSL

Центрировать элемент внутри grid сетки

Ответы (4 шт):