使用 CSS 网格，您可以让第 1 行完整和第 2 行自动调整吗？

Question

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

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

我能得到的最好的是：

我知道网格项目默认情况下只跨越一个列和行轨道，但您可以跨越多个行 and/or 列轨道使用相同的属性来定位它们，所以我将第一个项目设置为 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>

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

使用 CSS 网格，您可以让第 1 行完整和第 2 行自动调整吗？

Using CSS Grid, Can you have Row 1 Full and Row 2 Auto-Fit?

html

css

flexbox

css-grid