CSS網格-網格開頭的動態列

我已閱讀以下內容：

我理解為什么會發生這種情況，因為我已經定義了一個明確的網格，現在復選框正在使用1fr.

這個額外的復選框僅在給定狀態下添加。發生這種情況時，還會向容器中添加一個類selecting。所以，這就是我現在正在做的嘗試解決這個問題。添加該類時，我會重新定義網格列。

顯示代碼片段

body {
  background: #131418;
  margin: 1em;
}

:root {
  --extra-section: 70px;
}

.container {
  padding: 0.5em;
  border: 1px solid silver;
  color: silver;
  /* grid */
  display: grid;
  grid-template-columns: 1fr auto repeat(3, minmax(var(--extra-section), auto));
  grid-auto-columns: var(--extra-section);
  grid-auto-flow: column;
  grid-column-gap: 0.5em;
  align-items: center;
}

.container.selecting {
  grid-template-columns: auto 1fr auto repeat(3, var(--extra-section));
}

<div class="container selecting">
  <div class="select">
    <label>
      <input type="checkbox">
    </label>
  </div>
  <div class="title">
    Lorem ipsum dolor sit amet, consectetur
  </div>
  <div class="people">
    <img src="https://i.pravatar.cc/25" />
    <img src="https://i.pravatar.cc/25" />
    <img src="https://i.pravatar.cc/25" />
  </div>
  <div class="likes">9</div>
  <div class="bookmarks">4</div>
  <div class="shares">2</div>
</div>

在這個下面還有一堆其他元素，就像它一樣，它們都共享相同的布局和 CSS。當復選框被添加到一個時，它也會被添加到其余的復選框中。如果你愿意的話，有點像一張桌子。

我的目標是為標題部分提供盡可能多的空間。

我的問題是：

我可以在不必重新定義模板的情況下實作嗎？就像，設定一次，如果添加復選框，它會自動調整，同時為標題提供盡可能多的空間？

我想用 grid 而不是 flexbox 來解決這個問題，因為布局中的其他所有東西都使用 grid ，我很想保持這種方式。

uj5u.com熱心網友回復：

是的你可以。

該grid布局允許您設定在同樣的規定小區內的多個元素。

您可以在第一列和第一行內設定.select和.title。（以某種方式類似于絕對定位的效果）

如果.select _^(在這里)位于 前面.title，則給.titleamargin或 apadding為復選框留出空間。

下面帶.select盒和不帶盒的現場示例

body {
  background: #131418;
  margin: 1em;
}

:root {
  --extra-section: 70px;
}

.container {
  padding: 0.5em;
  border: 1px solid silver;
  color: silver;
  /* grid */
  display: grid;
  grid-template-columns: 1fr auto repeat(3, minmax(var(--extra-section), auto));
  grid-auto-columns: var(--extra-section);
  grid-auto-flow: column;
  grid-column-gap: 0.5em;
  align-items: center;
}

body {
  background: #131418;
  margin: 1em;
}

:root {
  --extra-section: 70px;
}

.container {
  padding: 0.5em;
  border: 1px solid silver;
  color: silver;
  /* grid */
  display: grid;
  grid-template-columns: 1fr auto repeat(3, minmax(var(--extra-section), auto));
  grid-auto-columns: var(--extra-section);
  grid-auto-flow: column;
  grid-column-gap: 0.5em;
  align-items: center;
}
.container .select,
.container .title {
  grid-column:1;
  grid-row:1;
}
.select {position:relative;/* bring it up front to be clickable */}
.container .select   .title {
  padding-inline-start:1.5rem;/* or padding-left for ltr direction */
}

<div class="container">
  <div class="select">
    <label>
      <input type="checkbox">
    </label>
  </div>
  <div class="title">
    Lorem ipsum dolor sit amet, consectetur
  </div>
  <div class="people">
    <img src="https://i.pravatar.cc/25" />
    <img src="https://i.pravatar.cc/25" />
    <img src="https://i.pravatar.cc/25" />
  </div>
  <div class="likes">9</div>
  <div class="bookmarks">4</div>
  <div class="shares">2</div>
</div>
<hr>
<div class="container">
  <div class="title">
    Lorem ipsum dolor sit amet, consectetur
  </div>
  <div class="people">
    <img src="https://i.pravatar.cc/25" />
    <img src="https://i.pravatar.cc/25" />
    <img src="https://i.pravatar.cc/25" />
  </div>
  <div class="likes">9</div>
  <div class="bookmarks">4</div>
  <div class="shares">2</div>
</div>

padding或marginon.title也可以一直在那里，隨時保持相同的對齊方式。

注意：是否可以將選項position:relative置于if.select之上。.titlepadding

uj5u.com熱心網友回復：

由于您已經指出了問題，因此似乎很容易解決。將 1fr auto 替換為 auto 1fr 為：

grid-template-columns: auto 1fr repeat(3, minmax(var(--extra-section), auto));

標籤：css css网格

上一篇：當一個css變數被賦予2個值時它是如何作業的？

下一篇：CSS中的Flexbox-為什么CSS中容器中兩個其他框之間定義的寬度框未以其實際大小顯示？[復制]