CSS Grid minmax - 未遵守最小宽度

Question

我一直在尝试创建一个 3 列布局，其中包含宽度为 1、2 或 3 列的卡片。为此，我使用了 CSS Grid grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

我的完整代码在这里:Pen of the layout

当容器的宽度增长和收缩时，我会遇到一些奇怪的行为。我希望根据可用性添加或删除新列，以添加最小宽度的新列(在本例中为 300px)。这似乎没有发生 - 正在添加宽度 <300px 的新列。

我的SCSS如下:

.grid{
  max-width:1020px;
  margin:0 auto;
  padding:10px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-flow: dense;
  grid-gap:10px;
}
.card{
  padding: 5px;
  background: #CCC;

  grid-column: auto / span 1;
  &:nth-child(2), &:nth-child(5) {
    grid-column: auto / span 2;
  }
  &:nth-child(1), &:nth-child(6) {
    grid-column: 1 / end;
  }
}

我是在尝试做一些超出 CSS Grid 能力范围的事情，还是我的代码做错了什么？

Answer 1

问题是您通过定义 grid-column:auto/span 2 创建的隐式网格，这意味着该元素将占用 2 列，因此网格需要至少包含 2 列。当宽度低于 300px 时，您会明确创建一列，浏览器会隐式创建另一列。

.grid {
  max-width: 1020px;
  margin: 0 auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-flow: dense;
  grid-gap: 10px;
}

.card {
  padding: 5px;
  background: #CCC;
  grid-column: auto / span 1;
}
.card:nth-child(2), .card:nth-child(5) {
  /*grid-column: auto / span 2;*/
}
.card:nth-child(1), .card:nth-child(6) {
  grid-column: 1 / end;
}

<p>Expected that new columns would only appear when 300px were available, but that doesn't seem to happen. New columns appear with much less available. Why???
<div class="grid">
  <div class="card"><h1>grid-column: 1 / end</h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam earum eum at nemo, illo voluptatem inventore, eveniet praesentium deleniti minus omnis saepe vitae explicabo similique natus? Est magnam aut veritatis?</div>
  <div class="card"><h1>grid-column: auto / span 2;</h1>Id at accusantium, nisi error ipsa debitis corporis laudantium harum, dolorem odio beatae ad porro ullam perferendis tenetur odit eligendi, quisquam quasi rem? Placeat dolorum totam dignissimos tempore quia dolore?</div>
  <div class="card"><h1>grid-column: auto / span 1;</h1>Provident maxime vitae perspiciatis voluptate quos rerum vel illo quas deleniti, voluptatem labore quibusdam. Eligendi, dolore, reprehenderit labore ipsum ipsam quod, nulla nihil harum dolor ipsa debitis quos officiis sed!</div>
  <div class="card"><h1>grid-column: auto / span 1;</h1>Fugiat minus sequi vel commodi cum inventore in quae alias fuga quis voluptates perferendis nostrum tempore a maxime voluptas illo, officiis harum ipsam qui recusandae esse fugit asperiores. Architecto, eveniet.</div>
  <div class="card"><h1>grid-column: auto / span 2;</h1>Quaerat delectus sint cumque inventore corporis alias consequatur totam nemo? Excepturi totam voluptatem voluptate! Exercitationem possimus amet voluptas corporis autem maiores nesciunt deserunt delectus! Ex praesentium ea debitis laborum doloribus.</div>
  <div class="card"><h1>grid-column: 1 / end;</h1>Illo inventore perferendis officia nisi voluptatum temporibus nemo laudantium fuga suscipit? Aliquid nihil rem obcaecati vitae placeat temporibus cumque nostrum illum cum, ab dicta sequi voluptatum saepe, ut, voluptatibus suscipit.</div>
</div>

删除它你仍然会遇到问题，因为 grid-column: 1/end; 这意味着从第 1 列开始到名为 end 的区域，但你没有t 指定具有该名称的任何区域，以便浏览器将隐式创建一个区域。

你可以清楚地注意到上面的例子，最后一列没有遵循 minmax(300px, 1fr) 的逻辑，因为它是为 end 创建的列。 p>

我怀疑你想使用grid-column: 1/-1;这意味着从 1 到 end:

.grid {
  max-width: 1020px;
  margin: 0 auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-flow: dense;
  grid-gap: 10px;
}

.card {
  padding: 5px;
  background: #CCC;
  grid-column: auto / span 1;
}
.card:nth-child(2), .card:nth-child(5) {
  /*grid-column: auto / span 2;*/
}
.card:nth-child(1), .card:nth-child(6) {
  grid-column: 1 / -1;
}

<p>Expected that new columns would only appear when 300px were available, but that doesn't seem to happen. New columns appear with much less available. Why???
<div class="grid">
  <div class="card"><h1>grid-column: 1 / end</h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam earum eum at nemo, illo voluptatem inventore, eveniet praesentium deleniti minus omnis saepe vitae explicabo similique natus? Est magnam aut veritatis?</div>
  <div class="card"><h1>grid-column: auto / span 2;</h1>Id at accusantium, nisi error ipsa debitis corporis laudantium harum, dolorem odio beatae ad porro ullam perferendis tenetur odit eligendi, quisquam quasi rem? Placeat dolorum totam dignissimos tempore quia dolore?</div>
  <div class="card"><h1>grid-column: auto / span 1;</h1>Provident maxime vitae perspiciatis voluptate quos rerum vel illo quas deleniti, voluptatem labore quibusdam. Eligendi, dolore, reprehenderit labore ipsum ipsam quod, nulla nihil harum dolor ipsa debitis quos officiis sed!</div>
  <div class="card"><h1>grid-column: auto / span 1;</h1>Fugiat minus sequi vel commodi cum inventore in quae alias fuga quis voluptates perferendis nostrum tempore a maxime voluptas illo, officiis harum ipsam qui recusandae esse fugit asperiores. Architecto, eveniet.</div>
  <div class="card"><h1>grid-column: auto / span 2;</h1>Quaerat delectus sint cumque inventore corporis alias consequatur totam nemo? Excepturi totam voluptatem voluptate! Exercitationem possimus amet voluptas corporis autem maiores nesciunt deserunt delectus! Ex praesentium ea debitis laborum doloribus.</div>
  <div class="card"><h1>grid-column: 1 / end;</h1>Illo inventore perferendis officia nisi voluptatum temporibus nemo laudantium fuga suscipit? Aliquid nihil rem obcaecati vitae placeat temporibus cumque nostrum illum cum, ab dicta sequi voluptatum saepe, ut, voluptatibus suscipit.</div>
</div>

---

为了更好地说明这两个问题，这里是第一个问题的简化示例:

.box {
  display:grid;
  grid-template-columns:100px; /* I defined one column*/
  grid-gap:10px;
}
.box span:first-child {
  grid-column:span 2; /* I will create another column*/
}

.box span {
  height:50px;
  background:red;
}

<div class="box">
<span></span>
<span></span>
</div>

第二个:

.box {
  display:grid;
  grid-template-columns:100px; /* I defined one column*/
  grid-gap:10px;
}
.box span:first-child {
  grid-column:1/ a_radom_name; /* I will create another column*/
}

.box span {
  height:50px;
  background:red;
}


.box span:last-child {
  grid-column-end:a_radom_name; /* I can place other element on that column */
}

<div class="box">
<span></span>
<span></span>
</div>

如果您检查网格，您会注意到我们将以 2 列结尾(一列隐式和一列显式)

---

The three properties grid-template-rows, grid-template-columns, and grid-template-areas together define the explicit grid of a grid container. ^ref

When grid items are positioned outside of these bounds, the grid container generates implicit grid tracks by adding implicit grid lines to the grid. These lines together with the explicit grid form the implicit grid. ^ref