CSS 網格使用 Material-UI 和 React

Question

我想用卡片在下面的圖片上實現這個布局。 我想像圖片一樣填寫整個頁面。 我不知道Grid是否是通往 go 的方式，還是使用 CSS Grid 會像grid-template-columns更好？ 請在下面檢查我的代碼框。

點擊這里： 代碼沙盒

<Grid sx={{ background: "silver", height: "100vh" }} container spacing={2}>
      <Grid item xs={12}>
        <Grid container spacing={2}>
          <Grid item>
            <Card>
              <CardHeader sx={{ height: "100px", width: "300px" }} />
              <CardContent sx={{ height: "100px" }}></CardContent>
            </Card>
          </Grid>
          <Grid item>
            <Card>
              <CardHeader sx={{ height: "100px", width: "300px" }} />
              <CardContent sx={{ height: "100px" }}></CardContent>
            </Card>
          </Grid>
          <Grid item>
            <Card>
              <CardHeader sx={{ height: "100px", width: "300px" }} />
              <CardContent sx={{ height: "100px" }}></CardContent>
            </Card>
          </Grid>
        </Grid>
      </Grid>
    </Grid>

Answer 1

由於您包含CSS標記，因此這里是使用grid的純CSS解決方案。 檢查下面的片段（整頁）：

 * { margin: 0; padding: 0; box-sizing: border-box; }.container { display: flex; flex-direction: column; padding: 5px; height: 100vh; gap: 5px; background: #F5F5F5; }.header { width: 100%; height: 20%; background: #fff; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; }.hr { width: 100%; height: .15rem; margin-bottom: .1rem; border-bottom: 1px solid #F1F1F1; }.grid { height: 100%; gap: .5rem; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); }.grid>div { background: #fff; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px; }.grid>div:nth-of-type(4) { grid-column: span 2; grid-row: span 2; }.grid>div:nth-of-type(5) { grid-row: span 2; }

 <div class="container"> <div class=header></div> <div class="hr"></div> <div class="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div>

**使用height: 100vh; 順便說一句， container在這里。

更多關於grid的信息。