Как пропустить первый столбец при использовании повторяющейся CSS-сетки? ⇐ CSS

[Anonymous]

Я пытаюсь воссоздать описанное выше. макет. Каждый заголовок будет связан с несколькими элементами флажка. Флажки генерируются динамически, и я хочу, чтобы количество столбцов увеличивалось, если пользователь расширяет окно. Я пытаюсь использовать одну сетку CSS; однако, когда я это делаю, флажки продолжают проникать в столбец заголовка. См. ниже.

Код: Выделить всё

import React from 'react';
import {FormControlLabel, Typography, Box, Checkbox} from '@material-ui/core';

const ITEMS_1 = ["Item 1", "Item 2", "Item 3",]
const ITEMS_2 = ["Item A", "Item B", "Item C", "Item D", "Item E", "Item F"]
const ITEMS_3 = ["Item a", "Item b", "Item c", "Item d",]

export const Grid = () => {
return (

{
[ITEMS_1, ITEMS_2, ITEMS_3].map(
(items) => 


Header 1


{
items.map(
(value) => 

)
}

)
}

);
};

Можно ли разместить элементы Item так, чтобы они по-прежнему автоматически помещались в повторяющиеся столбцы, но никогда не были вставлены в первый столбец?< /п>

Подробнее здесь: https://stackoverflow.com/questions/783 ... g-css-grid