Столбцы равной ширины в CSS Grid

Я бы хотел, чтобы html отображался в n равных столбцах, есть ли два, или три или более дочерних элемента для элемента строки, используя css grid - Flexbox делает это легко, но я не могу сделать это с помощью css grid - любая помощь оценивается.

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

Ответы

Ответ 1

Определите это в вашем сеточном контейнере. Устанавливает три столбца одинаковой ширины.

grid-template-columns: repeat(3, 1fr);

Ответ 2

@Michael_B ответ почти там.

.grid-container {
   display: grid;
   grid-auto-columns: 1fr;
   grid-auto-flow: column;
}

Предоставляет вам один ряд столбцов одинакового размера в Chrome, Firefox и Safari при написании.

Ответ 3

Попробуйте это:

.grid-container {
   display: grid;
   grid-auto-columns: 1fr;
}

.grid-items {
   grid-row: 1;
}

В противном случае, здесь может быть полезна демонстрация: jsFiddle

Чтобы узнать об устройстве fr, смотрите эти сообщения:

Ответ 4

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

.row {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(33.33%, 1fr) );
}
.item {
  grid-column: span 1;
}