如何制作非交互式网格叠加？

Question

我想在开发网格时在其网站上显示网格，这是一种Adobe XD样式(link to image)，以更好地了解元素正在（或应该占据）多少位置。

下面的代码有效，但是当将位置设置为“固定”或“绝对”时，我必须手动指定网格的宽度。

必须有一种更优雅的方法来做到这一点。 有关如何执行此操作的任何建议？

const testGridItems = () =>{
  var list = new Array();
  for(let i=0; i<12; i++){
  list.push( 
      <Grid item xs={1}>
        <div  align='center' 
           style={{  
             height: '100vh',
             position:'relative', 
             backgroundColor: '#F6BB42', 
             opacity:0.2}
           }>
             {i+1}
        </div>
      </Grid>
  )
  }

return list;
}


const testGrid = () => {
  return (
    <Grid container
      style={{
       width:1200,
       position:'fixed'
      }} 
      spacing={24} >

      { testGridItems() }
     </Grid>

  )
}