html - 存在于不同 Grid 容器中的 Material UI Grid 元素的垂直对齐

Question

我需要执行一个需要三个垂直列的设计。第一列和最后一列包含 MaterialUI 卡片，中间一列包含一 strip 点的垂直线，这些点与每张卡片的开头垂直对齐。卡片本身的高度是不固定的。我附上了设计的缩小屏幕截图。

这是我的布局:

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