从线性渐变网格图案中删除截止边缘？

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 像素的倍数（否则当它为最后一个正方形添加 48px 时它可能会推动它在您设置的任何大小或边距的右边缘之外）：

margin: 0 auto;
width: 1681px;

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

Answer 3

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

您将有固定数量的 row/column 会根据元素大小增长收缩：

.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>

或者您可以保留 linear-gradient 的使用，并考虑将 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>

space

The image is repeated as often as will fit within the background positioning area without being clipped and then the images are spaced out to fill the area. The first and last images touch the edges of the area. If the background painting area is larger than the background positioning area, then the pattern repeats to fill the background painting area.

round

The image is repeated as often as will fit within the background positioning area. If it doesn’t fit a whole number of times, it is rescaled so that it does.

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

从线性渐变网格图案中删除截止边缘？

Removing cut-off edge from linear-gradient grid pattern?

css

linear-gradients