How to get colspan=2 in grid css layout?

Question

In my react component I am trying (first time) to use a css grid layout. The column should span 2 but it is only 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>

This is the styledcomponent:

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

How can I create a colspan of 2 . Also when I have I have more than 1 adjustment the layout is off:

const adjustmentsWrong = [{ lastYear: 2000, currentYear: 1000 },{ lastYear: 300, currentYear: 500 }] const adjustments = [{ lastYear: 2000, currentYear: 1000 }]