如何使用 CSS 制作网格（类似于方格纸的网格）？我只想使用 CSS 制作虚拟网格纸。
8个回答
247
要制作网格，您可以使用CSS渐变，在所有现代浏览器上都适用（请参见Caniuse）。
使用线性渐变绘制线框网格：
body {
background-size: 40px 40px;
background-image:
linear-gradient(to right, grey 1px, transparent 1px),
linear-gradient(to bottom, grey 1px, transparent 1px);
}使用径向渐变来绘制带有点状角落的网格：
body {
background-size: 40px 40px;
background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
}- shunryu111
6
2清晰而聪明，很好！ - 1_bug
1谢谢！有什么想法可以制作虚线/点线网格吗？ - Julius Š.
易如反掌。有更简单的版本会更好。 - user285594
2这对本地开发非常有用，我只是在使用它来确保我的 CSS 实现符合设计网格，因此我不关心跨浏览器支持。我为我的使用情况进行了轻微修改，通过使用百分比而不是像素，我可以获得一个由16个列组成的网格，而不受视口宽度的影响：background-size: 6.25% 16pt; - Frederick Brummer
3如果某人的代码仍然无法正常工作，那么请尝试添加：background-repeat: repeat; - MrFisherman
如果您想要去掉顶部和左侧边框（使边框仅在单元格之间），那么请添加
background-position: -1px -1px;。 - user64851953
body {
background:
linear-gradient(-90deg, rgba(0,0,0,.05) 1px, transparent 1px),
linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
linear-gradient(-90deg, rgba(0, 0, 0, .04) 1px, transparent 1px),
linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
linear-gradient(transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
linear-gradient(-90deg, #aaa 1px, transparent 1px),
linear-gradient(-90deg, transparent 3px, #f2f2f2 3px, #f2f2f2 78px, transparent 78px),
linear-gradient(#aaa 1px, transparent 1px),
#f2f2f2;
background-size:
4px 4px,
4px 4px,
80px 80px,
80px 80px,
80px 80px,
80px 80px,
80px 80px,
80px 80px;
}- Mathew stephen
5
6你好，欢迎来到 SO！请尝试添加几行说明您认为自己的答案最好地回答了原始问题，谢谢。 - m4rtin
2其他回答都很好，但这是许多人在搜索“网格纸”时心中所想的类型，谢谢。 - Lunster
我喜欢这个想法，但您能否发布一个只显示基本图形的简单版本？ - jdmayfield
这应该是被接受的答案。 - jscul
这太棒了。 - ether_joe
22
既然你提到了格纸：
div {
background-color: #fff;
background-size: 100% 1.2em;
background-image: -webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -webkit-linear-gradient(#eee .05em, transparent .05em);
background-image: -moz-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -moz-linear-gradient(#eee .05em, transparent .05em);
background-image: -ms-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -ms-linear-gradient(#eee .05em, transparent .05em);
background-image: -o-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -o-linear-gradient(#eee .05em, transparent .05em);
background-image: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eee .05em, transparent .05em);
-pie-background: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px) 0 0 / 100% 1.2em, linear-gradient(#eee .05em, transparent .05em) 0 0 / 100% 1.2em #fff;
behavior: url(/PIE.htc);
}<div style="width: 200px; height: 200px"></div>最后一行: behavior: url(/PIE.htc); 是一个名为css3pie的插件，它为IE 6-9提供了支持。实际上，这个例子是从他们的网站上取出来的，在那里有更多有趣的例子: http://css3pie.com/demos/gradient-patterns/
- chacham15
18
一个conic-gradient()就能完成工作
html {
background:
conic-gradient(from 90deg at 1px 1px,#0000 90deg,blue 0)
0 0/50px 50px;
}另一个概念：
html {
--s: 100px; /* control the size */
--_g: #0000 90deg,#366 0;
background:
conic-gradient(from 90deg at 2px 2px,var(--_g))
0 0/var(--s) var(--s),
conic-gradient(from 90deg at 1px 1px,var(--_g))
0 0/calc(var(--s)/5) calc(var(--s)/5);
}- Temani Afif
7
你可以使用类似这样的网格图像：
#background {
background: url('path/to/grid-image.png');
}
所以，这不仅仅是CSS - 你还需要图片，但解决方案应该非常干净。下面是它的演示：
#background {
width: 200px;
height: 160px;
background: url('http://i.stack.imgur.com/GySvQ.png');
}<div id="background"></div>- Yi Jiang
3
1更为可接受的方法 - 我仍然使用它，因为它很简单。只需确保 PNG 图像尽可能压缩即可。例如，上面的答案使用了一个大小为 1kb 的 PNG 文件。如果你通过 https://tinypng.com/ 运行该文件，它会将其优雅地减少到 109b - 节省了 89% 的空间。 - TheCarver
7技术上，您可以仅使用以下 CSS 来实现：
background: url('data:image/png;base64,[yourBase64StringHere]');
将 [yourBase64StringHere] 替换为该十字形图片的 Base64 编码字符串。 - ADJenks如果你真的想使用图片，请使用SVG。 - Gugalcrom123
5
使用svg和base64完成。
通过更改svg中的宽度、高度和颜色参数，可以修改比例和颜色。
以下是两个示例，分别为蓝色和白色的不同尺寸方形网格。
.blue-square-grid-20px {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='100%' height='100%' fill='%230000ff' /%3E%3Crect x='50%' width='2' height='100%' fill='%231ff' /%3E%3Crect y='50%' width='100%' height='2' fill='%231ff' /%3E%3C/svg%3E%0A");
}
.white-square-grid-40px {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23fff' /%3E%3Crect x='50%' width='1' height='100%' fill='%23ddd' /%3E%3Crect y='50%' width='100%' height='1' fill='%23ddd' /%3E%3C/svg%3E%0A");
}
.example-box {
width: 100vw;
height: 100px;
}<p>blue grid, 20px grid size and 2px line width</p>
<div class="blue-square-grid-20px example-box"></div>
<p>white grid, 40px grid size and 1px line width</p>
<div class="white-square-grid-40px example-box"></div>- Timothy Alexis Vass
5
这不具有可扩展性，渐变或SVG更受欢迎。 - Gugalcrom123
比例是通过
background-size进行设置，这是一种仅基于CSS的解决方案。 - Timothy Alexis Vass但它是一个PNG格式的位图图像。 - Gugalcrom123
1@gugalcrom123 不错的观点。现在已经改为带有两个不同颜色和尺寸示例的svg格式。 - Timothy Alexis Vass
1@gugalcrom123 说得好。现在已经改成了带有两个不同颜色和尺寸示例的svg格式。 - undefined
2
既然我们已经有点状网格和全行网格的解决方案，为了完整起见，这里提供了一个虚线网格解决方案（也可以使用点状或单一）。只需根据您的需求调整CSS变量即可。
这是一个演示链接：https://jsfiddle.net/0nt7v9bj/
.dashed-grid-paper {
--grid-size: 30px;
--grid-strength: 1px;
--grid-dash: 10px;
--grid-gap: 5px;
--grid-color: #ddd;
--paper-color: #fff;
background-color: var(--paper-color);
background-size: var(--grid-dash) var(--grid-dash), var(--grid-size) var(--grid-size);
background-image:
linear-gradient(to bottom, transparent var(--grid-gap), var(--paper-color) var(--grid-gap)),
linear-gradient(to right, var(--grid-color) var(--grid-strength), transparent var(--grid-strength)),
linear-gradient(to right, transparent var(--grid-gap), var(--paper-color) var(--grid-gap)),
linear-gradient(to bottom, var(--grid-color) var(--grid-strength), transparent var(--grid-strength));
}<body class="dashed-grid-paper">
<p style="margin: 40px">How to make a dashed line grid paper<br>like background using CSS only.</p>
</body>--grid-dash: 1px;
--grid-gap: 5px;
要获取单行版本，请像这样更改CSS变量：
--grid-dash: 1px;
--grid-gap: 1px;
- Ferris
1
如果你想要得到真正的图纸上更粗的线条，并且不介意使用 ::before 和 ::after，你可以这样做：
body {
position: relative;
border-radius: 0 !important;
background-color: #ecefff;
background-size: 0.5rem 0.5rem;
background-position:0.25rem 0.25rem;
background-image:
linear-gradient(to right, rgba(50, 100, 150, 0.1) 1px, transparent 1px),
linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 1px, transparent 1px);
margin: 0;
}
body::before, body::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: 2.5rem 2.5rem;
background-position:0.25rem 0.25rem;
background-image:
linear-gradient(to right, rgba(50, 100, 150, 0.1) 2px, transparent 2px),
linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 2px, transparent 2px);
z-index: -1;
}
body::after {
background-size: 5rem 5rem;
background-image:
linear-gradient(to right, rgba(50, 100, 150, 0.1) 3px, transparent 3px),
linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 3px, transparent 3px);
}
body {
position: relative;
border-radius: 0 !important;
background-color: #ecefff;
background-size: 0.5rem 0.5rem;
background-position:0.25rem 0.25rem;
background-image:
linear-gradient(to right, rgba(50, 100, 150, 0.1) 1px, transparent 1px),
linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 1px, transparent 1px);
margin: 0;
}
body::before, body::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: 2.5rem 2.5rem;
background-position:0.25rem 0.25rem;
background-image:
linear-gradient(to right, rgba(50, 100, 150, 0.1) 2px, transparent 2px),
linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 2px, transparent 2px);
z-index: -1;
}
body::after {
background-size: 5rem 5rem;
background-image:
linear-gradient(to right, rgba(50, 100, 150, 0.1) 3px, transparent 3px),
linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 3px, transparent 3px);
}
- David Airey
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接