存在於不同網格容器中的MaterialUI網格項的垂直對齊

Question

我需要執行一個需要三個垂直列的設計。 第一列和最后一列包含MaterialUI卡，中間列包含一條垂直線，其中的點與每張卡的起點垂直對齊。 卡片的高度本身並不固定。 我附上了設計的縮小屏幕截圖。

這是我的布局：

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

我需要能夠垂直對齊卡片和垂直分割線（帶點），如附帶的屏幕截圖所示。 但是，目前還不清楚如何依賴於不同Grid容器中存在的元素。

設計截圖：

Answer 1

 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>