Как получить colspan = 2 в сетке CSS? - PullRequest
Новая
       12

Как получить colspan = 2 в сетке CSS?

0 голосов
/ 03 апреля 2019

В моем компоненте реакции я пытаюсь (в первый раз) использовать сетку 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. Кроме того, когда у меня есть более 1 регулировки, макет выключен:

const AdjustmentsWrong = [{lastYear: 2000, currentYear: 1000}, {lastYear: 300, currentYear: 500}] константные корректировки = [{lastYear: 2000, currentYear: 1000}]

...