简体   繁体   中英

Vertical alignment of MaterialUI Grid items that exist in different Grid containers

I need to execute on a design that calls for three vertical columns. The first and last columns contain MaterialUI cards and the middle column contains a vertical line with dots that are vertically aligned with the start of each of the cards. The heights of the cards themselves are not fixed. I've attached a minified screenshot of the design.

Here is the layout that I have:

<Grid container>
    <Grid item xs={5}>
        <Grid container direction={"column"}>
            cards...
        </Grid>
    </Grid>
    <Grid item xs={2}>
        vertical line...
    </Grid>
    <Grid item xs={5}>
        <Grid container direction={"column"}>
            cards...
        </Grid>
    </Grid>
</Grid>

I need to be able to vertically align the cards and the vertical divider line (with dots) as shown in the attached screenshot. However, it's very unclear how one could render elements dependently that exist in different Grid containers.

Design screenshot: 截图

 maybe work... // Add your dot icon in ::before in css file <style> leftColumns::before { display: ' '; position:absolute; background: '...'; top: 0; left: 0; } leftColumns { position:relative; } /* Repeat for RightColumns */ </style> <Grid container> <Grid item xs={6} style={{borderLeft: '1px solid #ccc'> <Grid container direction={"column"}> // for each item <div className="leftColumns" style={{padding: '0 10px'}}> <Card /> </div> enter code here </Grid> </Grid> <Grid item xs={6} style={{borderRight: '1px solid #ccc'> <Grid container direction={"column"}> // for each item - Like LeftColumns <div className="RightColumns" style={{padding: '0 10px'}}> <Card /> </div> </Grid> </Grid> </Grid> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM