不同网格容器中存在的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>