How to make a grid (like graph paper grid) with just CSS?

html

responsive-design

css3

web-development

byAlex Kataev·Sep 26, 2024

For creating a graph paper grid impact using CSS, make use of display: grid for structuring and linear-gradient() to generate lines:

.grid {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(4, 1fr);
  background:
    linear-gradient(90deg, rgba(204, 204, 204, 0.8) 1px, transparent 1px), /* vertical lines, you can call it Wall-E */
    linear-gradient(rgba(204, 204, 204, 0.8) 1px, transparent 1px); /* horizontal lines, let's name it Eve */
  background-size: 25px 25px; /* dimensions of each cell, basically it's Wall-E's and Eve's love nest */
}

Simply add the .grid class to your container:

<div class="grid" style="width: 100px; height: 100px;"></div>

This code births a grid consisting of 25px squares and 1px stroke. We are only leveraging background gradients, ensuring a streamlined and adaptable grid pattern. background-size and rgba values are quite versatile giving it a great customization edge.

Going beyond the fast answer

Adding a texture, because why not?

Let's take the grid aesthetic to the next level by including a subtle texture image:

.grid {
  /* ...existing styles... */
  background-image: 
    url('paper-texture.png'),
    linear-gradient(90deg, rgba(204, 204, 204, 0.8) 1px, transparent 1px), /* hey it's Wall-E again! */
    linear-gradient(rgba(204, 204, 204, 0.8) 1px, transparent 1px); /* and there she is, Eve 💖*/
}

Having old friends on board

While CSS gradients are widely supported, for getting Internet Explorer to play nice, use css3pie and the behavior property.

Playing around with shapes

Did you know graphs aren't always squares? Enjoy creating circular grids with conic-gradient(). Mix up different CSS layers for fun!

.grid {
  /* ...existing styles... */
  background-image: 
    linear-gradient(white, white),
    conic-gradient(from 45deg, #ccc 2%, transparent 0);
  background-blend-mode: difference;
}

Most bang for the buck adjustments

Dialing up the grid contrast

By playing around with rgba values, you can create different levels of opacity to blend or stand out the grid lines:

.grid {
  /* ...existing styles... */
  background-image: 
    linear-gradient(90deg, rgba(204, 204, 204, 0.5) 1px, transparent 1px), /* Wall-E got a tan */
    linear-gradient(rgba(204, 204, 204, 0.5) 1px, transparent 1px); /* Eve is following suit */
}

Show off with complex patterns

To showcase intricate designs, use layered gradients:

.grid {
  /* ...existing styles... */
  background:
    linear-gradient(90deg, #ddd 1px, transparent 1px),    /* it's raining lines, vertical ones */
    linear-gradient(180deg, #ddd 1px, transparent 1px),   /* oh look, more lines, but they are horizontal this time */
    linear-gradient(45deg, #ccc 1px, transparent 1px),    /* we're on a roll, slash those lines */
    linear-gradient(135deg, #ccc 1px, transparent 1px);   /* hold my beer... and add some more lines */
  background-size: 20px 20px;                            /* more the merrier, also Wall-E and Eve moved to a bigger place, good for them! */
}

Responsive is the new black

Embrace responsive web design; tweak grid size with media queries for a consistent look across devices:

@media (max-width: 600px) {
  .grid {
    background-size: 15px 15px; /* Wall-E and Eve downsized, but they seem happy */
  }
}

explain-codes / Html / How to make a grid (like graph paper grid) with just CSS?

Linked

Css-only masonry layout



Fill SVG path element with a background-image



Dim entire screen except a fixed area?



Rounded table corners CSS only



Css Floating Divs At Variable Heights



How to draw grid using HTML5 and canvas or SVG



Css Background Opacity

