使用重复CSS网格时如何跳过第一列？

Question

我正在尝试重新创建上面的布局。每个标题将与多个复选框项目相关联。复选框是动态生成的，如果用户扩展窗口，我希望列数增加。我正在尝试使用单个 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 (
    <Box
        display="grid"
        gridTemplateColumns="repeat(auto-fit, minmax(14em, auto))"
        gridRowGap=".2em"
        justifyContent="space-evenly"
        width="100%"
    >
    {
        [ITEMS_1, ITEMS_2, ITEMS_3].map(
            (items) => <>
                <Box gridColumn="1/1">
                    <Typography align="center" variant="h6" >
                        Header 1
                    </Typography>
                </Box>
                {
                    items.map(
                        (value) => <FormControlLabel
                            label={value}
                            control={<Checkbox /> }
                        />
                        
                    )
                }
            </>
        )
    }
    </Box>
  );
};

有没有办法可以放置 Item 元素，以便它们仍然会自动放置到

repeat

列中，但它们永远不会插入到第一列中？

Answer 1

您可能需要考虑将标题从网格中取出并放入不同的框中，这样网格就不会干扰标题。 您可能必须将整个东西放入某种容器中以将其与其他物品分开。