如何在网格CSS布局中获得colspan = 2？

Question

在我的 React 组件中，我尝试（第一次）使用 css 网格布局。该列应该跨越 2，但实际上只有 1：

   < Value textAlign="right" gridCol={1} gridRow={index + 3} weight={'regular'}>
                <select>
                    <option />
                    <option value="-">Non-recurring income </option>
                    <option value="+">Non-recurring expense</option>
                    <option value="-">Rental Income (new purchase)</option>
                    <option value="+">Rental Expense (new purchase)</option>
                    <option value="+">Discretionary Super</option>
                    <option value="-">Capex</option>
                    <option value="-">Working Capital Adjustments </option>
                </select>
            </Value>

            <Value textAlign="right" gridCol={2} gridRow={index + 3}>
                {adjustment.lastYear}
            </Value>

            <Value textAlign="right" gridCol={3} gridRow={index + 3}>
                {adjustment.currentYear}
            </Value>

            <Value textAlign="right" gridCol={4} gridRow={index + 3}>
                DEL
            </Value>

            <ValueComments textAlign="right" gridRow={index + 4} >
                <textarea>Leave your comments here</textarea>
            </ValueComments>

这是样式组件：

const ValueComments = styled.div`
 grid-column: 2/ 4;
`;

如何创建 2 的 colspan 。另外，当我进行超过 1 次调整时，布局会关闭：

const adjustmentWrong = [{ lastYear: 2000, currentYear: 1000 },{ lastYear: 300, currentYear: 500 }] const adjustment = [{ lastYear: 2000, currentYear: 1000 }]