如何将容器网格内的子网格显示到下一行，保留空间并根据文本包装网格？答案

【问题标题】：How to display the child Grids inside the container Grid to the next line retaining the space and wrapping the grid according to the text?如何将容器网格内的子网格显示到下一行，保留空间并根据文本包装网格？
【发布时间】：2022-01-04 12:36:20
【问题描述】：

组件下方包含一个父网格，其中存在 2 个其他子网格。我试图实现一个硬编码的聊天 UI，我也尝试过使用 sm md 属性，但这会丢弃根据里面的文字内容。使用 sm md 属性可使网格保持恒定宽度，使用文本时可能无法完全填充，因为文本长度会不断变化。

export const Chats = () => {
  return (
    <>
      <Grid container display={"wrap"} justifyContent={"space-between"}>
        <Grid
          style={{
            backgroundColor: "white",
            padding: "10px",
            marginTop: "100px",
            borderRadius:"10px"
          }}
        >
          <Box>
            <Typography>This is message 1 </Typography>
          </Box>
        </Grid>
        <Grid
          style={{
            backgroundColor: "#E3F6CB",
            padding: "10px",
            marginTop: "100px",
            borderRadius:"10px"

          }}
        >
          <Typography>This is message 2</Typography>
        </Grid>
      
      </Grid>
    </>
  );
};

【问题讨论】：

您应该将<Grid item ... 用于子网格，例如<Grid item xs={8}> 见basic setup
我也试过了，但这会丢弃网格根据文本内容被包裹的属性

标签： reactjs material-ui grid

【解决方案1】：

您可以使用如下所示的样式 CSS 属性“display:inline-flex”来确保动态文本内容被 Grid 包裹。确保为每个正在创建的聊天框使用多个网格容器。确保使用 Material UI 中的预定义属性，如下所示。


export const Chats = () => {
  return (
    <>
      <Grid container xs={12} style={{ display: "inline-flex" }}>
        <Grid item xs={6}>
          <Box
            style={{
              backgroundColor: "white",
              padding: "10px",
              marginTop: "100px",
              borderRadius: "10px",
              display: "inline-flex",
            }}
          >
           This is message 1
          </Box>
        </Grid>
        <Grid item xs={6}></Grid>
      </Grid>
      <Grid container  justifyContent={"space-between"}>
        <Grid item ></Grid>

        <Grid  item >
          <Box
            style={{
              backgroundColor: "#E3F6CB",
              padding: "10px",
              borderRadius: "10px",
              display: "inline-flex",
            }}
          >
           This is message 2
          </Box>
        </Grid>
      </Grid>
    </>
  );
};

【讨论】：