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的区域，但是您没有指定任何名称的区域，因此浏览器将隐式创建一个。

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

我怀疑您要使用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列（一列隐式和一列显式）结尾

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

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

CSS Grid minmax-不遵守最小宽度

1 个答案: