Question

我有一个使用线性渐变创建的网格图案。

#grid {
    margin-left:80px; 
    margin-right:80px; 
    height:289px; 
    background-size: 48px 48px;
    background-image: linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px);
}

问题是网格的右侧被切除，而不显示边缘。 How it looks.

如何显示右侧边缘？最好，我希望保持相同的边距。

Answer 1

有种骇客，但请参阅以下内容（查看整页）：

#grid {
    margin: 0 auto;
    max-width: 1200px;
    height: 289px; 
    background-size: 47.955555px 48px;
    background-image: linear-gradient(to right, grey 1px, transparent 1px), linear-gradient(to bottom, grey 1px, transparent 1px);
}

<div id="grid"></div>

您可能必须创建媒体查询来控制较小设备上的宽度。

Answer 2

尝试设置网格边距，使其自动居中，而不是绝对边距宽度，然后最重要的是为其设置宽度为48px加1 px的倍数（否则，当它为最后一个正方形添加48px时，可能会将其向外推您设置的大小或边距的右边缘）：

margin: 0 auto;
width: 1681px;

例如，1680像素为您提供35个网格正方形，但是如果您未将其设为1681，则右边缘将消失。

Answer 3

改为使用repeating-linear-gradient，您将可以更好地控制网格，并且可以使网格响应。

您将具有固定数量的行/列，该行/列将根据元素大小而缩小：

.box {
  --nc:10; /* Number of columns */
  --nr:6; /* Number of rows    */
  width:80vw;
  margin:auto;
  height:60vh;
  border-top:1px solid;
  border-left:1px solid;
  background:
    repeating-linear-gradient(to right ,transparent 0px calc(100%/var(--nc) - 1px),#000 calc(100%/var(--nc) - 1px) calc(100%/var(--nc))),
    repeating-linear-gradient(to bottom,transparent 0px calc(100%/var(--nr) - 1px),#000 calc(100%/var(--nr) - 1px) calc(100%/var(--nr)));
}

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

或者您可以继续使用线性渐变，并考虑将round用作background-repeat。调整浏览器大小以查看效果：

.box {
  width:80vw;
  margin:auto;
  height:80vh;
  border-top:1px solid;
  border-left:1px solid;
  background:
    linear-gradient(to right ,transparent calc(100% - 1px),#000 calc(100% - 1px) 100%),
    linear-gradient(to bottom,transparent calc(100% - 1px),#000 calc(100% - 1px) 100%);
  background-size:40px 100%,100% 60px;
  background-repeat: round;
}

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

或space：

.box {
  width:80vw;
  margin:auto;
  height:80vh;
  border-top:1px solid;
  border-left:1px solid;
  background:
    linear-gradient(to right ,transparent calc(100% - 1px),#000 calc(100% - 1px) 100%),
    linear-gradient(to bottom,transparent calc(100% - 1px),#000 calc(100% - 1px) 100%);
  background-size:40px 100%,100% 60px;
  background-repeat: space;
}

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

空格

在不被剪裁的情况下，将图像重复尽可能多的程度以使其适合背景定位区域，然后将图像隔开以填充该区域。第一个和最后一个图像触及该区域的边缘。如果背景绘画区域大于背景定位区域，则重复图案以填充背景绘画区域。

回合

重复图像的次数将使其适合背景定位区域。如果不适合全部次数，则会对其进行重新缩放以使其适用。

参考：https://drafts.csswg.org/css-backgrounds-3/#valdef-background-repeat-space

要删除线性渐变网格图案的切边吗？

3 个答案: