CODEWITHSUNDEEP
reactjscsscss-gridstyled-components
bier hier
bier hier

Reputation: 22520

How to get colspan=2 in grid css layout?

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 }]

Upvotes: 13

Views: 21314

Answers (1)

anonymous
anonymous

Reputation: 1

  1. Fix Grid Column Span Ensure the 'grid-column' value is set correctly in the 'ValueComments' styled component

  2. Parent Container Setup Verify that the parent container has a grid layout and correctly defined columns. Add 'display: grid' and 'grid-template-columns' to the container where these '' and '' components are rendered.

    const ValueComments = styled.div grid-column: 2 / span 2; /* Spans 2 columns starting from column 2 */ grid-row: ${(props) => props.gridRow}; /* Dynamic row based on props */;

Parent Container

const GridContainer = styled.div``
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
gap: 10px; /* Adjust spacing as needed */`;

Upvotes: 0

Related Questions