Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

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

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

Problem

PLAYGROUND HERE

Vertical grid can be achieved by:

HTML:

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:

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:

CSS:

[Enter your answer here]

enter image description here

PLAYGROUND HERE

Problem courtesy of: Misha Moroshko

Solution

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

Solution courtesy of: Misha Moroshko

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

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

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×