删除CSS Grid

时间：2018-04-03 18:28:16

标签： html css html5 css3 css-grid

我使用css网格进行了设计，这让我在行之间留下了意想不到的空间。我用以下代码复制了我的问题：

＆＃13;
＆＃13; 
main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
article {
  background: red;
}
.item1 {
  height: 30px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}
.item2 {
  height: 100px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}
.item3 {
  height: 300px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 4;
}
.item4 {
  height: 490px;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 5;
}
.item5 {
  height: 160px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 4;
  grid-row-end: 6;
}
.item6 {
  height: 520px;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 5;
  grid-row-end: 7;
}
.item7 {
  height: 300px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 6;
  grid-row-end: 7;
}
＆＃13; 
<main>
  <article class="item1"></article>
  <article class="item2"></article>
  <article class="item3"></article>
  <article class="item4"></article>
  <article class="item5"></article>
  <article class="item6"></article>
  <article class="item7"></article>
</main>
＆＃13;
＆＃13;
＆＃13;

在这里，你可以在底部项目的顶部看到额外的差距。

我发现了一个类似的问题 - Why does CSS Grid layout add extra gaps between cells? - 其中额外的差距是由数字引起的，并且在数字上使用display: flex解决了，但这对我没有用。

有什么想法吗？

修改

我的例子是误导性的，这是一个更接近实际问题的版本：

＆＃13;
＆＃13; 
main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
article {
  background: red;
}
article div {
  background: blue;
}
.item1 {
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 1;
}
.item1 div {
  height: 30px;
}
.item2 {
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 2;
  grid-row-end: span 1;
}
.item2 div {
  height: 100px;
}
.item3 {
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 3;
  grid-row-end: span 1;
}
.item3 div {
  height: 300px;
}
.item4 {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 1;
  grid-row-end: span 4;
}
.item4 div {
  height: 490px;
}
.item5 {
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 4;
  grid-row-end: span 2;
}
.item5 div {
  height: 160px;
}
.item6 {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 5;
  grid-row-end: span 2;
}
.item6 div {
  height: 520px;
}
.item7 {
  grid-column-start: 1;
  grid-column-end: span 1;
  grid-row-start: 6;
  grid-row-end: span 1;
}
.item7 div {
  height: 300px;
}
＆＃13; 
<main>
  <article class="item1"><div></div></article>
  <article class="item2"><div></div></article>
  <article class="item3"><div></div></article>
  <article class="item4"><div></div></article>
  <article class="item5"><div></div></article>
  <article class="item6"><div></div></article>
  <article class="item7"><div></div></article>
</main>
＆＃13;
＆＃13;
＆＃13;

在这里你可以看到红色的额外差距。包含div的高度就是为了模拟文章的真实内容，因此无法在实际示例中修改它们（它们在实际代码中保留为默认值）。根据预编辑的答案，我尝试了grid-auto-rows属性，但它没有解决问题。

3 个答案:

答案 0 :(得分：4)

您有一个包含三个显式列和10px装订线的网格容器：

main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

没有定义任何行。所有行都是隐式的并且占用内容高度（因为网格容器的默认设置是grid-auto-rows: auto）。

在此容器内部是使用line-based placement定位的七个网格项。

让我们把它分解成各个部分。

第1项

.item1 {
    height: 30px;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}

enter image description here

足够简单。第1项跨越第一列和第一行。它的高度为30px，用于设置行高。

第2项

.item2 {
    height: 100px;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
}

enter image description here

再次，非常简单。第2项跨越第一列和第二行。它的高度为100px，用于设置行高。

第3项

.item3 {
    height: 300px;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
}

enter image description here

与上述两项相似，第3项清晰简洁。它横跨第一列和第三行。它的高度为300px，用于设置行高。

现在开始变得有点棘手......

第4项

.item4 {
    height: 490px;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 5;
}

enter image description here

项目4设置为总共四行：

grid-row-start: 1 / grid-row-end: 5

它的高度为490像素。

但是项目1,2和＆amp; 3设置为总共三个行：

grid-row-start: 1 / grid-row-end: 4

......他们的总身高是：430px（30px + 100px + 300px）

因此，第4项创建一个高度为30px的新行（490px - 430px - 30px网格行间隙）。

第5项

.item5 {
    height: 160px;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 6;
}

enter image description here

项目5的高度为160px，设置为跨越两行。它从第四行开始（由第4项创建）并创建一个新的第五行。

由于行高设置为auto，因此对于覆盖多个轨道的网格区域，每行接收网格项高度的相等分布，为defined in the spec。这使得第4行和第5行每个都高80px。

重要事项：请注意第5项等高行如何展开第4行，第4行现在与第4项底部的原始位置隔开。已创建第一个间隙。< /强>

第6项

.item6 {
    height: 520px;
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 5;
    grid-row-end: 7;
}

enter image description here

项目6设置为从第5行开始。如上所述（参见重要），因为项目5网格上的grid-auto-rows: auto，第5行无法再适合第4项区域。 这导致与第6项相差50px。 

80px height of row 4 - 30px excess of Item 4 = 50px

但现在第6项增加了第5项创建的第5行的80px高度。第二个差距已经创建。

第7项

.item7 {
    height: 300px;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 6;
    grid-row-end: 7;
}

enter image description here

最后两行的高度由以下三个因素决定：

  • 第5项的高度，第5行为80px
  • 第6项的高度，即520px，与第5行的高度相结合，跨越两行
  • 第7项的高度，即300px并跨越1行

出于与网格行第5行与第4项间隔开的原因相同的原因，网格行第6行远离第5项：auto行height正在它所覆盖的行中分配第6项的高度。

一种解决方案

不要将高度设置为网格项，而应考虑将grid-auto-rows设置为10px。然后使用span关键字创建所需的网格区域。

所以不要这样...... 

main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.item5 {
  height: 160px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 4;
  grid-row-end: 6;
}

考虑一下：

main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 10px; /* new */
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.item5 {
  /* height: 160px; */
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 4;     /* this would have to be adjusted, as well */
  grid-row-end: span 16; /* new */
}

这里介绍了这种方法：CSS-only masonry layout but with elements ordered horizontally

答案 1 :(得分：0)

显然它不是同一个问题（在Why does CSS Grid layout add extra gaps between cells?）

问题是你要指定列的height，强制它不填充剩余的内容并弄乱grid，因为你要指定它应该在哪里start在end和grid-column中设置{}}和grid-row，为正确的列项设置height为auto将解决您的问题，

enter image description here

我认为grid表现得像这样的原因是因为您没有为grid-template-rows设置grid，因此行的内容高度很高在第一列，

我认为您不应该设置grid-items的高度并使用grid-template-rows，如果您对height:auto的高度不满意，也许您应该考虑重新处理grid-row-start和grid-row-end

我希望这可以解决您的问题，或至少让您了解如何解决它。

＆＃13;
＆＃13; 
main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
article {
  display: flex;
  background: red;
}
.item1 {
  height: 30px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}
.item2 {
  height: 100px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}
.item3 {
  height: 300px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 4;
}
.item4 {
  height: auto;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 5;
}
.item5 {
  height: 160px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 4;
  grid-row-end: 6;
}
.item6 {
  height: auto;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 5;
  grid-row-end: 7;
}
.item7 {
  height: 300px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 6;
  grid-row-end: 7;
}
＆＃13; 
<main>
  <article class="item1"></article>
  <article class="item2"></article>
  <article class="item3"></article>
  <article class="item4"></article>
  <article class="item5"></article>
  <article class="item6"></article>
  <article class="item7"></article>
</main>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

差距来自错误计算高度您正在设置到容器。您应该介意元素元素跨越的10px排水沟。

为了保持流畅，您可以使用min-height代替height并使用grid-template-rows或grid-auto-rows以某种方式为行设置min-height。

您也可以根本不设置任何高度，让框和行根据其所持有的内容调整其大小。

使用min-height和grid-template-rows 进行测试（grid-auto-rows，请参阅其他答案）。

＆＃13;
＆＃13; 
main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows:repeat(auto-fill, 4em);/* min-height of 4em if row is empty*/
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
article {
  display: flex;
  background: red;
}
.item1 {
  /* it will be at least 4em of height*/
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}
.item2 {
  min-height:180px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}
.item3 {
  min-height:80px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 4;
}
.item4 {
  min-height:150px;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 5;
}
.item5 {
  min-height:450px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 4;
  grid-row-end: 6;
}
.item6 {
 min-height:240px;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 5;
  grid-row-end: 7;
}
.item7 {
  min-height:160px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 6;
  grid-row-end: 7;
}
/* see and name me */
article:before{
  content:attr(class);
  font-size:2em;
}
＆＃13; 
<main>
  <article class="item1"></article>
  <article class="item2"></article>
  <article class="item3"></article>
  <article class="item4"></article>
  <article class="item5"></article>
  <article class="item6"></article>
  <article class="item7"></article>
</main>
＆＃13;
＆＃13;
＆＃13;

或者不要设置任何高度，让布局从内容中增长：

＆＃13;
＆＃13; 
main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
   grid-column-gap: 10px;
  grid-row-gap: 10px;
}
article {
  display: flex;
  background: red;
  /* to deal with 'lorem ipsum' content added  */
  flex-flow:column;
  padding:0.5em;
}
.item1 {
  /* it will be at least 4em of height*/
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2;
}
.item2 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}
.item3 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 4;
}
.item4 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 5;
}
.item5 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 4;
  grid-row-end: 6;
}
.item6 {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 5;
  grid-row-end: 7;
}
.item7 {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 6;
  grid-row-end: 7;
}
＆＃13; 
<main>
  <article class="item1"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></article>
  <article class="item2"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></article>
  <article class="item3"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></article>
  <article class="item4"><h1>HTML Ipsum Presents</h1>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>

<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>
</article>
  <article class="item5"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></article>
  <article class="item6"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></article>
  <article class="item7"></article>
</main>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题