CSS Grid minmax - 不遵守最小宽度

Question

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

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

当容器的宽度增大和缩小时，我会出现一些奇怪的行为。我希望根据添加最小宽度的新列的可用性来添加或删除新列（在本例中为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 的区域，但您没有指定任何具有该名称的区域，因此浏览器将隐式创建一个。

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

我怀疑你想使用grid-column: 1 / -1；这意味着从 1 到 结束：

.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 列结束（一列隐式和一列显式）

---

grid-template-rows、grid-template-columns 和 grid-template-areas 三个属性共同定义了网格容器的显式网格。 ^ref

当网格项目位于这些边界之外时，网格容器通过向网格添加隐式网格线来生成隐式网格轨迹。这些线与显式网格一起形成隐式网格。 ^ref