CSS расположение элемента сетки внутри div

Question

Я работаю с этой частью кода:

<div class="row">
  <h2>Row title</h2>
  <span class="test">table cell</span>
  <span>table cell</span>
</div>
<div class="row">
  <h2>Row title</h2>
  <span>table cell</span>
  <span>table cell</span>
</div>
<div class="row">
  <h2>Row title</h2>
  <span>table cell</span>
  <span>table cell</span>
</div>

У меня вопрос, если я сделаю:

.row {
    grid-column: span 3;
}

Можно ли разместить элементы внутри этих составных ячеек, как это без flexbox на <div>?

Answer 1

Нет, не только с этим,

.row {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
 }

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

Проверьте -> https://www.w3schools.com/cssref/pr_grid-column.asp для справки.

---

также свойство grid-column в основном используется для стиль индивидуальный элемент. Это также в сочетании со свойством display: grid элемента обтекания

Answer 2

Вы можете использовать свойства align-items: и justify-items:, чтобы перемещать содержимое внутри флекс-бокса вокруг

Если вам нужно руководство, я бы посоветовал взглянуть на это https://www.joomlashack.com/blog/tutorials/center-and-align-items-in-css-grid/* 1007. *