使用CSS網格，您可以讓第1行完整和第2行自動適應嗎？-有解無憂

我是使用 CSS Grid 的新手，只是想提出一個簡單的問題以尋求幫助。

我創建了一個 3 列 2 行的網格。但是，我希望在整個容器居中的同時使頂部全行寬度上的第一個專案和自動適應下方的 3 個專案。

我能得到的最好的是：

使用 CSS 網格，您可以讓第 1 行完整和第 2 行自動適應嗎？

我知道默認情況下 Grid 專案僅跨越一個列和行軌道，但您可以使用相同的屬性跨越多個行和/或列軌道來定位它們，因此我將第一個專案設定為 grid-column-start: 1; grid-column-end: 4;

就讓第二行的三個專案自動適應而言，我可以在 justify isstart而不是時實作它center。因此，我不確定這是否真的可以用網格實作，因為我已經嘗試學習這個程序，如果我理解正確，那么由于自動放置的默認行為，專案會填滿在繼續填充下一行之前的當前行。

任何建議將是appercaited。謝謝

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>

uj5u.com熱心網友回復：

如果您使用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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/386919.html

標籤：html css 弹性盒 css网格

上一篇：BootstrapDropmenu在點擊時自動調整大小

下一篇：在css類中宣告鏈接屬性