CSS：如何在同一元素上创建垂直和水平网格？

Question

PLAYGROUND HERE

Vertical grid can be achieved by:

HTML：

<div class="vertical-grid">
</div>

CSS：

.vertical-grid {
  background-size: 20px 100%;
  background-image: linear-gradient(to right,
                                    black 0%,
                                    transparent 5%,
                                    transparent 100%);
}

Horizontal grid can be achieved by:

HTML：

<div class="horizontal-grid">
</div>

CSS：

.horizontal-grid {
  background-size: 100% 10px;
  background-image: linear-gradient(to bottom,
                                    black 0%,
                                    transparent 7%,
                                    transparent 100%);
}

是否可以在同一元素上同时使用两个网格？

HTML：

<div class="vertical-grid horizontal-grid">
</div>

CSS：

[Enter your answer here]

PLAYGROUND HERE

Answer 1

以下是使用多个背景的可能解决方案：

.vertical-grid.horizontal-grid {
  background-size: 20px 100%, 100% 10px;
  background-image: linear-gradient(to right,
                                    black 0%,
                                    transparent 5%,
                                    transparent 100%),
                    linear-gradient(to bottom,
                                    black 0%,
                                    transparent 7%,
                                    transparent 100%);
}

DEMO