想改善這個(gè)問題？通過編輯這篇文章來添加細(xì)節(jié)和澄清問題。

使用grid是實(shí)現(xiàn)這一點(diǎn)的最佳方式，因?yàn)樗试S您在兩個(gè)方向上控制布局——水平和垂直。通過MantineUI，您可以使用SimpleGrid組件。

重要的是要記住，Mantine中的每個(gè)組件都與一組特定的CSS屬性相關(guān)聯(lián)，因此選擇特定的組件是為了應(yīng)用那些樣式，而不是組織您的代碼。下面是一個(gè)例子，說明如何去除無關(guān)的組件，以產(chǎn)生更干凈、更易維護(hù)的代碼和輸出。(此處演示)。

//App.js
import { Fragment } from "react";
import {
  MantineProvider,
  Divider,
  Paper,
  SimpleGrid,
  Text,
  Title
} from "@mantine/core";
import { data } from "./data.js";

export default function App() {
  const breakpoints = [
    { maxWidth: "60rem", cols: 3, spacing: "md" },
    { maxWidth: "40rem", cols: 2, spacing: "sm" },
    { maxWidth: "30rem", cols: 1, spacing: "sm" }
  ];

  return (
    <MantineProvider withGlobalStyles withNormalizeCSS>
      <Paper shadow="xs" radius="xs" p="1rem" m="1rem">
        <Title order={2}>Conta</Title>
        <Text size="sm" color="violet-purple.0" fw={700} mb="lg">
          Restaurante Vila do Fausto Ltda
        </Text>
        <Divider size="xs" variant="dotted" />
        {data.map((section) => (
          <Fragment key={section.title}>
            <Title order={5} my="lg">
              {section.title}
            </Title>
            <SimpleGrid cols={4} spacing="lg" mb="lg" breakpoints={breakpoints}>
              {section.content.map((item) => (
                <div key={item.heading}>
                  <Text color="#7C9599" fw={700} size="sm">
                    {item.heading}:
                  </Text>
                  <Text size="0.8rem">{item.details}</Text>
                </div>
              ))}
            </SimpleGrid>
          </Fragment>
        ))}
      </Paper>
    </MantineProvider>
  );
}


//data.js
export const data = [
  {
    title: "Informa??es Gerais",
    content: [
      { heading: "Nome da Empresa", details: "Lorem Ipsum" },
      { heading: "CPF / CNPJ", details: "Lorem Ipsum" },
      { heading: "Raz?o Social ", details: "Lorem Ipsum" },
      { heading: "E-mail", details: "Lorem Ipsum" },
      { heading: "Telefone", details: "Lorem Ipsum" },
      { heading: "Natureza Jurídica", details: "Lorem Ipsum" },
      { heading: "NIRE", details: "Lorem Ipsum" },
      { heading: "Org?o de Registro ", details: "Lorem Ipsum" }
    ]
  },
  {
    title: "Endere?o Principal",
    content: [
      { heading: "Logradouro", details: "Lorem Ipsum" },
      { heading: "Número", details: "Lorem Ipsum" },
      { heading: "Bairro", details: "Lorem Ipsum" },
      { heading: "Cidade", details: "Lorem Ipsum" },
      { heading: "Estado", details: "Lorem Ipsum" },
      { heading: "Complemento", details: "Lorem Ipsum" },
      { heading: "CEP", details: "Lorem Ipsum" }
    ]
  }
];