如何使用 Grid 对齐行？答案

【问题标题】：how align rows using Grid?如何使用 Grid 对齐行？
【发布时间】：2021-09-11 16:25:07
【问题描述】：

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

<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>

如何对齐两行？

【问题讨论】：

标签： javascript html css css-grid

【解决方案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>

【讨论】：

【解决方案2】：

grid layout 是一种使用类似于flexbox 的 CSS 设置 html 内容样式的方法。
因此，为了实现您想要的目标，您应该添加一个容器（例如 <div>-元素）并将所需的样式添加到 CSS。
DYNAMICMORTAL 为您提供了一个可能对您有所帮助的免费示例！

【讨论】：