Отображение элементов одинаковой ширины с сеткой

Question

Я пытаюсь отобразить поля в строке в следующей форме: отобразить 3 поля в строке с одинаковой шириной, а остальные из них, если у меня есть 2 поля в строке с одинаковой шириной, и если есть осталось одно поле для полной ширины

Я пробовал с этим CSS:

root: {
        width: '100%',
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)',
        gridColumnGap: theme.spacing(),
        overflow: 'hidden',
    },

Но это результат, который я получил:

Как я могу достичь ожидаемого результата (первое изображение) с сеткой CSS?

Answer 1

Я могу придумать два решения для этого. Первый вместо разделения сетки на 3 столбца, разделите на 6 столбцов и разбейте элементы сетки на несколько столбцов, выбрав их с помощью селектора nth-child. Второй Не используйте сетку вообще, вместо этого создайте гибкий контейнер, который будет иметь еще 3 гибких контейнера в качестве дочерних узлов. И используйте flex-basis, чтобы получить желаемый результат.

Решение 1 Используя сетку из 6 столбцов , вы должны указать определенные c элементы сетки и используйте span, чтобы распределить их по n количеству столбцов. Например, для первых трех элементов сетки необходимо указать grid-column: span 2;. Например,

.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
}


.grid-item:nth-child(1),
.grid-item:nth-child(2),
.grid-item:nth-child(3) {
  grid-column: span 2;
}

.grid-item:nth-child(4),
.grid-item:nth-child(5) {
  grid-column: span 3;
}

.grid-item:last-child {
  grid-column: span 6;
}

См. Демонстрацию в codeandbox .

Решение 2

Поскольку вы запросили решение, используя CSS -grid, Не думаю, что стоит включать код решения, которое вместо этого использует flex-box. Взгляните на codeandbox , чтобы найти решение с использованием flex-box.