設定網格列始終為100%

我創建了一個包含三列的簡單 CSS 網格容器，當我將資料添加到第一列時，由于某種原因，它會在第一列和第二列之間創建空間，我希望我的列的寬度始終為可用空間的 100%。

注意：我不想設定每列的靜態大小，例如：grid-template-columns: 200,200,200我希望它們始終為 100%

我該如何解決這個問題？

代碼：

.container {
  display: grid;
  grid-template-columns: auto auto auto;
}

.column {
  background-color: #cccccc;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

<div class="container" *ngIf="selectedMenuItem === menu[3]">
  <div class="column col-3 offset-md-2">
    <div class="row">
      <div>
        <label>Test Test</label>
      </div>
    </div>
    <div class="row">
      <div>
        <label>Test Test Test Test Test, Test/Test</label>
      </div>
    </div>
    <div class="row">
      <div>
        <label>Test Test Test; Test/Test</label>
      </div>
    </div>

  </div>
  <div class="column">
    <p>Column 2 </p>
  </div>
  <div class="column">
    <p>Column 3 </p>
  </div>
</div>

更新

作為下面的評論，我嘗試：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.column {
  background-color: #cccccc;
}

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

    <div class="container" *ngIf="selectedMenuItem === menu[3]">
      <div class="column col-3 offset-md-2">
        <div class="row">
            <label>This is a test of column 100%</label>
        </div>
        <div class="row">
          <div>
            <label>Test Test Test Test Test, Test/Test</label>
          </div>
        </div>
        <div class="row">
          <div>
            <label>Test Test Test; Test/Test</label>
          </div>
        </div>

      </div>
      <div class="column">
        <p>Column 2 </p>
      </div>
      <div class="column">
        <p>Column 3 </p>
      </div>
    </div>

但是文字不是100％，我該如何解決？

uj5u.com熱心網友回復：

您可以使用小數單位，這將使它們填滿所有可用空間。您可以調整每列的大小，例如1fr 2fr 1fr使中心列的大小是外列的兩倍。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

更新：

<div class="column col-3 offset-md-2">
    <div class="row">
        <label>Test Test</label>
        <label>Test Test Test Test Test, Test/Test</label>
        <label>Test Test Test; Test/Test</label>
    </div>
  </div>

uj5u.com熱心網友回復：

.container {
  display: grid;
  grid-template-columns: auto auto auto;
}

.column {
  background-color: #cccccc;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />

<div class="container" *ngIf="selectedMenuItem === menu[3]">
  <div class="column col offset-md-2">
    <div class="row">
      <div>
        <label>Test Test</label>
      </div>
    </div>
    <div class="row">
      <div>
        <label>Test Test Test Test Test, Test/Test</label>
      </div>
    </div>
    <div class="row">
      <div>
        <label>Test Test Test; Test/Test</label>
      </div>
    </div>

  </div>
  <div class="column">
    <p>Column 2 </p>
  </div>
  <div class="column">
    <p>Column 3 </p>
  </div>
</div>

我還是不明白你想要的結果。但也許像這樣？你只是定義 col-3 而我不知道為什么

標籤：html css

上一篇：使用plotnine進行軸縮放

下一篇：我想將兩個DIV堆疊在一起，并使一個透明，這樣您就可以看到它后面的div。使用CSS和HTML