如何使用 Grid 对齐行？

Question

正如您在下面的图片中看到的那样，我正在尝试使用网格对齐“Nª de ticket”和“Email”：

My Result IMG

<Grid
        container
        direction="row"
        justifyContent="flex-start"
        alignItems="stretch"
        style={{ padding: "1.5em" }}
      >
        <div>
          <span>ID</span>
          <p style={{ color: "gray" }}>{props._id}</p>
        </div>
        <div>
          <span>N° de ticket</span>
          <p style={{ color: "gray" }}>{props._id}</p>
        </div>
      </Grid>

      <Grid
        container
        direction="row"
        justifyContent="space-between"
        alignItems="center"
        style={{ padding: "1.5em" }}
      >
        <div>
          <span>Fecha de nacimiento</span>
          <p style={{ color: "gray" }}>{props.birthdate}</p>
        </div>
        <div>
          <span>Email</span>
          <p style={{ color: "gray" }}>{props.email}</p>
        </div>
        <div>
          <span>Teléfono</span>
          <p style={{ color: "gray" }}>{props.phone}</p>
        </div>
      </Grid>

如何对齐两行？

Answer 1

尝试使用语法；

<!DOCTYPE html>
<html>

<head>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      background-color: #2196F3;
      padding: 10px;
    }
    
    .grid-item {
      background-color: rgba(255, 255, 255, 0.8);
      padding: 20px;
      font-size: 30px;
      text-align: center;
    }
  </style>
</head>

<body>

  <h1>Grid</h1>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>

</body>

</html>

Answer 2

grid layout is a way of styling your html content with CSS similar to flexbox.
因此，为了实现您想要的目标，您应该添加一个容器（例如 <div> 元素）并将所需的样式添加到 CSS.
DYNAMICMORTAL 为您提供了一个可能也有帮助的免费示例！

如何使用 Grid 对齐行？

how align rows using Grid?

html

javascript

css

css-grid