我使用React材質(zhì)UI和它的盒子組件來(lái)設(shè)計(jì)我的表單。 在我的例子中，我每行有4個(gè)項(xiàng)目，但在最后一行，我需要顯示3個(gè)項(xiàng)目，最后一個(gè)項(xiàng)目應(yīng)該填充行。 換句話說(shuō)，最后兩個(gè)元素必須合并。 當(dāng)Box組件將我所有的行分成4列時(shí)，我該怎么做呢？

我的代碼:

<Box
    sx={{
       display: 'grid',
       columnGap: 2,
       rowGap: 3,
       gridTemplateColumns: {xs: 'repeat(7, 1fr)',
       sm: 'repeat(4, 1fr)'},
         }}
  >
first row with 4 columns:

    <TextField ....>
    <TextField ....>
    <TextField ....>
    <TextField ....>

second row with 3 columns:

    <TextField ....>
    <TextField ....>
    //This column should be spanned for two columns.
    <TextField ....>

</Box>

嘗試此網(wǎng)格布局:

import * as React from "react";
import { Box, TextField } from "@mui/material";

export default function Grid() {
  return (
    <Box
      sx={{
        display: "grid",
        gridTemplateAreas: "'a1 a2 a3 a4' 'b1 b2 c c'"
      }}
    >
      {/* first row with 4 columns: */}
      <TextField style={{ gridArea: "a1" }} />
      <TextField style={{ gridArea: "a2" }} />
      <TextField style={{ gridArea: "a3" }} />
      <TextField style={{ gridArea: "a4" }} />
      {/* second row with 3 columns: */}
      <TextField style={{ gridArea: "b1" }} />
      <TextField style={{ gridArea: "b2" }} />
      {/* This column should be spanned for two columns. */}
      <TextField style={{ gridArea: "c" }} />
    </Box>
  );
}