CSS 网格指定第一列并为未知剩余设置小数单位

Question

我正在尝试学习 CSS 网格，但遇到问题似乎应该是一个基本的重复。考虑以下;我在 header 标签中有 3 个 div 元素。我希望第一个 div 至少为 450px，其余 div 元素（可以是 2、3 或 4）与剩余的 space.[=13 相等=]

我以为下面的方法会奏效，但似乎并不像我想的那么简单。我错过了什么？

header {
  display: grid;
  grid-template-columns: minmax(450px, 1fr) repeat(auto-fill, 1fr);
  grid-gap: 1rem;
}

<header>
  <div>
    <p>450px</p>
  </div>
  <div>
    <p>1fr</p>
  </div>
  <div>
    <p>1fr</p>
  </div>
</header>

Answer 1

您可以使用 auto-fit 而不是 auto-fill:

auto-fit

行为与自动填充相同，只是在放置网格项目后折叠任何空的重复轨道。空轨道是没有流入网格项目放置或跨越它的轨道。（这可能会导致所有轨道都被折叠，如果它们都是空的。）

header {
  display: grid;
  grid-template-columns: minmax(450px, 1fr) repeat(auto-fit, minmax(0, 1fr));
  grid-gap: 1rem;
}

<header>
  <div>
    <p>450px</p>
  </div>
  <div>
    <p>1fr</p>
  </div>
  <div>
    <p>1fr</p>
  </div>
</header>
<header>
  <div>
    <p>450px</p>
  </div>
  <div>
    <p>1fr</p>
  </div>
  <div>
    <p>1fr</p>
  </div>
  <div>
    <p>1fr</p>
  </div>
</header>

Answer 2

为此您需要一个列流：

header {
  display: grid;
  grid-auto-flow:column; /* column flow */
  grid-template-columns: minmax(450px, 1fr); /* first column */
  grid-auto-columns:1fr; /* all remaining equal width */
  grid-gap: 1rem;
}

<header>
  <div>
    <p>450px</p>
  </div>
  <div>
    <p>1fr</p>
  </div>
  <div>
    <p>1fr</p>
  </div>
</header>

<header>
  <div>
    <p>450px</p>
  </div>
  <div>
    <p>1fr</p>
  </div>
  <div>
    <p>1fr</p>
  </div>
  <div>
    <p>1fr</p>
  </div>
</header>

CSS 网格指定第一列并为未知剩余设置小数单位

CSS Grid Specify First Column and set Fractional Unit For Unknown Remaining

html

css

css-grid