CODEWITHSUNDEEP
css
Misha Moroshko
Misha Moroshko

Reputation: 171351

CSS: How to create vertical and horizontal grids on the same element?

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%);
}

enter image description here

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%);
}

enter image description here

Is that possible to have both grids on the same element?

HTML:

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

CSS:

[Enter your answer here]

enter image description here

PLAYGROUND HERE

Upvotes: 1

Views: 4441

Answers (1)

Misha Moroshko
Misha Moroshko

Reputation: 171351

Here is a possible solution using multiple backgrounds:

.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

Upvotes: 2

Related Questions