CSS 网格中的意外间隙

Question

我正在尝试关注这个 Stripe 博客 post:

https://stripe.com/blog/connect-front-end-experience

虽然我的最终产品看起来与教程中的大致相同，但我的浏览器似乎无意间出现了空白。我不愿意称它们为间隙，因为间隙在 CSS 网格中具有特定含义，而且我的错误似乎更像是随机舍入误差。

这里放几张图片对比一下。 Safari 比 chrome 更优雅地处理网格，但仍然存在问题。请注意照片中的像素化白线。

条纹成品：

我在 Safari 上的尝试：

我对 Chrome 的尝试：

这是我使用的代码：

.stripes {
  display: grid;
  grid: repeat(5, 200px) / repeat(10, 1fr);
  transform: skewY(-12deg);
  transform-origin: 0;
}

.stripes :nth-child(1) {
  grid-column: span 3;
}

.stripes :nth-child(2) {
  grid-area: 3 / span 3 / auto / -1;
}

.stripes :nth-child(3) {
  grid-row: 4;
  grid-column: span 5;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

.special1 {
  background: linear-gradient(to bottom left, #1890ff, #42C6EB);
}

.special2{
  background: linear-gradient(to left, #1890ff, #42C6EB);
}

.special3{
  background: linear-gradient(to left, rgba(66,198,235, 0.9), rgba(66,198,235,0.2));
}

.topRow {
  background: linear-gradient(to top, rgb(52, 173, 242), #1890ff);
}

.secondRow {
  background: linear-gradient(to top, #42C6EB, rgb(52, 173, 242))
}

.thirdRow {
  background: #42C6EB
}

.fourthRow {
  background: linear-gradient(to top, rgba(66,198,235,0.8), #42C6EB)
  
}

.fifthRow {
  background: linear-gradient(to top, rgba(66,198,235,0.2), rgba(66,198,235,0.8))
}

<div class="stripes">
  <div class="special1"></div>
  <div class="special2"></div>
  <div class="special3"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="fourthRow"></div>
  <div class="fourthRow"></div>
  <div class="fourthRow"></div>
  <div class="fourthRow"></div>
  <div class="fourthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
</div>

经过一番尝试，问题似乎出在使用 linear-gradient 上。当我从渐变色切换到纯色时，垂直条消失了，但沿对角线条纹的细小别名线运行没有消失。有什么想法吗？

Answer 1

在 HTML 中与 div 有一个奇怪的交互，如果下一个 div 与前一个 div 结束不在同一行开始，它创建空白。我发现了两个修复方法。一种是在与前一个 div 结尾相同的行上开始每个 div。另一个是像这样在两个 div 之间发表评论 :

</div><!--
--><div>

Answer 2

这是一个。不幸的是，没有微不足道的通用修复程序，因为当涉及到小于 1px.

的值时，每个浏览器处理计算的方式不同。

在您的情况下，您可以为整个容器添加背景以避免（或至少最小化）这种影响：

.stripes {
  display: grid;
  grid: repeat(5, 200px) / repeat(10, 1fr);
  background:linear-gradient(to top,rgba(66, 198, 235, 0.2),#1890ff);
  transform: skewY(-12deg);
  transform-origin: 0;
}

.stripes :nth-child(1) {
  grid-column: span 3;
}

.stripes :nth-child(2) {
  grid-area: 3 / span 3 / auto / -1;
}

.stripes :nth-child(3) {
  grid-row: 4;
  grid-column: span 5;
}

.blue {
  background: blue;
}

.red {
  background: red;
}

.special1 {
  background: linear-gradient(to bottom left, #1890ff, #42C6EB);
}

.special2{
  background: linear-gradient(to left, #1890ff, #42C6EB);
}

.special3{
  background: linear-gradient(to left, rgba(66,198,235, 0.9), rgba(66,198,235,0.2));
}

.topRow {
  background: linear-gradient(to top, rgb(52, 173, 242), #1890ff);
}

.secondRow {
  background: linear-gradient(to top, #42C6EB, rgb(52, 173, 242))
}

.thirdRow {
  background: #42C6EB
}

.fourthRow {
  background: linear-gradient(to top, rgba(66,198,235,0.8), #42C6EB)
  
}

.fifthRow {
  background: linear-gradient(to top, rgba(66,198,235,0.2), rgba(66,198,235,0.8))
}

<div class="stripes">
  <div class="special1"></div>
  <div class="special2"></div>
  <div class="special3"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="topRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="secondRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="thirdRow"></div>
  <div class="fourthRow"></div>
  <div class="fourthRow"></div>
  <div class="fourthRow"></div>
  <div class="fourthRow"></div>
  <div class="fourthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
  <div class="fifthRow"></div>
</div>

顺便说一句，如果你只想实现视觉效果，你可以考虑在一个容器内使用多个背景，而不是所有这些代码：

.container {
   height:1000px;
   transform: skewY(-12deg);
   transform-origin:0;
   background:
     /*special 1*/
     linear-gradient(to bottom left, #1890ff, #42C6EB) 0 0/calc(3*100%/10) calc(100%/5),
     /*special 2*/
     linear-gradient(to left, #1890ff, #42C6EB) 100% calc(100%/2)/calc(3*100%/10) calc(100%/5),
     /*special 3*/
     linear-gradient(to left, rgba(66,198,235, 0.9), rgba(66,198,235,0.2)) 0 calc(3*100%/4)/50% calc(100%/5),
     /*Top row*/
     linear-gradient(to top, rgb(52, 173, 242), #1890ff) 0 0/100% calc(100%/5),
     /*second row*/
     linear-gradient(to top, #42C6EB, rgb(52, 173, 242)) 0 calc(100%/4)/100% calc(100%/5),
     /*third row*/
     linear-gradient(#42C6EB, #42C6EB) 0 calc(100%/2)/100% calc(100%/5),
     /*fourth row*/
     linear-gradient(to top, rgba(66,198,235,0.8), #42C6EB) 100% calc(3*100%/4)/50.1% calc(100%/5),
     /*fifth row*/
     linear-gradient(to top, rgba(66,198,235,0.2), rgba(66,198,235,0.8)) 0 100%/100% calc(100%/5);
   background-repeat:no-repeat;
}

<div class="container">

</div>

CSS 网格中的意外间隙

Unintentional gaps in CSS grid

html

css

linear-gradients

css-grid