使用 CSS Grid，你可以让第 1 行完全和第 2 行自动调整吗？答案

【问题标题】：Using CSS Grid, Can you have Row 1 Full and Row 2 Auto-Fit?使用 CSS Grid，你可以让第 1 行完全和第 2 行自动调整吗？
【发布时间】：2022-01-21 12:26:50
【问题描述】：

我是使用 CSS Grid 的新手，只是想问一个简单的问题以寻求帮助。

我创建了一个包含 3 列和 2 行的网格。但是，我希望在整个容器居中的同时使顶部全行宽度上的第一个项目和下面的 3 个项目自动调整。

我能做到的最好的是：

Codepen Link Here

我知道默认情况下 Grid 项目仅跨越一个列和行轨道，但您可以使用相同的属性跨越多个行和/或列轨道来定位它们，因此我将第一个项目设置为 grid-column-start: 1; grid-column-end: 4;

就自动调整第二行的三个项目而言，当 justify 是 start 而不是 center 时，我可以实现它。因此，我不确定这是否真的可以使用网格，因为我已经尝试学习该过程并且如果我理解它，那么由于自动放置的默认行为，项目填满了所有插槽当前行，然后继续填充下一行。

任何建议都会得到重视。谢谢

CSS

div.property_loop_bottom_sec {
  display: grid;
  width: 50%;
  background: #f7f7f7;
  grid-template-columns: auto auto 1fr;
  grid-template-rows: 1fr auto;
  grid-column-gap: 0px;
  grid-row-gap: 5px;
  justify-items: center;
  align-items: center;
  margin: auto;
}

.property_field {
  display: inline-flex;
  justify-content: center;
}

.property_field.woo_loop_property_address {
grid-column-start: 1;
grid-column-end:   4;
background-color: #e9c8ec;
}

.property_field.woo_loop_listing {
    background-color: #8aff33;
}

.property_field.woo_loop_bedroom {
    background-color: #fff1ec;
}

.property_field.woo_loop_bathroom {
    background-color: #1cecec;
}

HTML

    <div class="property_loop_bottom_sec">
    <div class="property_field woo_loop_property_address">
        <div class="value">
            Street Address, Town, ZIP CODE
        </div>
    </div>
    <div class="property_field woo_loop_listing">
        <div class="value">
    House
        </div>
    </div>
    <div class="property_field woo_loop_bedroom">
        <div class="value">
    4 Bed
        </div>
    </div>
    <div class="property_field woo_loop_bathroom">
        <div class="value">
    2 Bath
        </div>
    </div>
</div>

【问题讨论】：

标签： html css flexbox css-grid

【解决方案1】：

如果您使用grid-template-areas，您可能会更容易处理。

<!DOCTYPE html>
<html>
  <head>
    <style>
        
      .property_field.woo_loop_listing {
        grid-area: title;
        background-color: #e9c8ec;
      }
      .item2 {
        grid-area: left;
        background-color: #8aff33 !important;
      }
      .item3 {
        grid-area: middle;
        background-color: #fff1ec !important;;
      }
      .item4 {
        grid-area: right;
        background-color: #1cecec !important;;
      }

      .grid-container {
        display: grid;
        grid-template-areas:
          "title title title"
          "left middle right";
        padding: 10px;
      }

      .grid-container > div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div class="grid-container">
      <div class="property_field woo_loop_listing">Street Address, Town, ZIP CODE</div>
      <div class="item2">House</div>
      <div class="item3">4 Bed</div>
      <div class="item4">2 Bath</div>
    </div>
  </body>
</html>

【讨论】：