Центрируйте оставшийся предмет из последней строки в сетке (1fr 1fr)

Question

Это то, с чем я боролся какое-то время, но я не могу найти способ сделать это.

Если у вас нечетное количество элементов в сетке, и вы хотите 2 элемента в строке (1fr 1fr), вы получите один элемент в последней строке, который находится по центру слева. Я просто хочу сделать его по центру, чтобы он выглядел лучше.

Вот и изображение.

Answer 1

Вы можете попробовать что-то подобное, поскольку я столкнулся с аналогичной проблемой в одном из моих предыдущих проектов.

grid-template-columns : repeat(auto-fit, minmax(<minSize>, 1fr));

Установите minSize на любую минимальную ширину, которую вы хотите, чтобы элемент занимал.

Answer 2

Вы можете попробовать что-то вроде this jsfiddle :

/* visibility properties */
body {
  width: 60%;
  margin: 5% auto;
}
div {
  margin: 3%;
  width: 100px;
  height: 100px;
  background-color: black;
  justify-self: center;
}
div:nth-of-type(2n) {
  background-color: red;
}

/* actual code: */
section {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

#last-div {
  grid-column: 1 / span 2;
}

<section>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div id="last-div">
</div>
</section>

Дополнительная информация CSS Сетка: Complete-Guide-grid