Pixel perfect grid backgrounds
In this post I’m going to show you how you can create seamless grids. They are ideal to be used as a background element.
By using SVG’s they will be super crisp and with Tailwind CSS we can easily make them more fancy by giving them any color we want, apply gradients and display different resolutions at specific breakpoints.
I assume you have a Laravel project with Tailwind already set up. If you’re using different frameworks you should still be able to follow along as well.
1. Create a grid image
The first step is preparing your grid image. We will be creating a grid and export it as an SVG image. The image will determine the resolution of your grid. For example, do you want to have a big grid of 100px x 100px per cell, or perhaps a smaller rectangular grid of 100px x 50px per cell.
If you’re not sure yet you can follow along with doing 100px x 100px grid. My favourite tool of creating custom SVG’s is Figma. Luckily Figma has a free plan, so create an account if you haven’t yet. If you don’t want to get into Figma, download the SVG we’re going to use here. And go to step 2.
Create an art board
First we create a new art board. By creating a new document and then press A and click and drag a new frame onto the canvas. The size doesn’t matter.
Draw a grid cell
Grab the pen tool and create the left side and the bottom side of the grid cell.
Don’t worry about the measurements, we will correct it in the next step.
But this is just half a grid cell, you might say. You are correct, and it’s all we need. A grid is actually the result of repeating a single cell over and over again. In our case we only need a left side and a bottom side and with CSS we can repeat them into an infinite grid.
Making the cell the right size
Now we have two sides of a grid cell, let’s make sure they have the correct measurements. First select the layer we we’ve just drawn. Take a look in the inspector and make sure the layer is positioned on whole pixels.
Next we can easily give it the correct dimensions by setting the height and width in the inspector as well.
Perfect, we’re done with drawing the cell.
Export it
Next, make sure you select the cell layer and setup an export by clicking the add export button and select the SVG option. Hit the export button and choose a location where you want to store the SVG.
2. Setup the CSS
Now grab the SVG file and move it to a public accessible location in your project. I often place my assets in a Laravel project within an images folder: /public/images. Now we know where we placed our image we’ll move over to CSS.
Define the selector
Go to your css file and define a class selector:
.bg-grid-100x100 {
}Next we’ll make sure the element that has this class will be repeated, absolutely positioned, positioned in the top-left corner, fill up all available space, be forced to the back and set the mask-image property to be linked to the SVG.
.bg-grid-100x100 {
@apply bg-repeat absolute top-0 left-0 w-full h-full -z-10;
-webkit-mask-image: url(/img/assets/grid-100x100.svg);
mask-image: url(/img/assets/grid-100x100.svg);
}Great, we are basically done!
3. Applying the grid
Now the fun part can be begin. Go to the file or page where you’d like to apply your grid and create a new element within the div where the grid should live. For example:
<div class="w-full py-32 bg-black relative">
<div class="bg-grid-100x100"></div>
</div> Note the parent element should be positioned relatively to make sure the grid is contained within the parent.
Now you might wonder, but I don’t see my grid. That’s correct the grid itself is currently black on a black background. The cool thing is, as we’re using a mask-image we can make the grid any color we want by setting a background color on the element:
<div class="w-full py-32 bg-black relative">
<div class="bg-grid-100x100 bg-gray-900"></div>
</div> Center align the grid
Pretty cool right? But as you might notice, the grid isn’t fully aligned in the center. As you scale the browser width you’ll see that the grid is always starting in the top-left corner. We can fix that by adding a mask-position attribute:
.bg-grid-100x100 {
@apply bg-repeat absolute top-0 left-0 w-full h-full -z-10;
-webkit-mask-image: url(/img/assets/grid-100x100.svg);
mask-image: url(/img/assets/grid-100x100.svg);
-webkit-mask-position: center;
mask-position: center;
}Create a faded grid by applying gradients
As we can set a background color to give the grid a specific color we can also apply gradients!
<div class="w-full py-32 bg-black relative">
<div class="bg-grid-100x100 bg-gradient-to-b from-gray-900 to-black"></div>
</div> Now we have a faded grid :). What I really like about this approach is how flexible you are giving your grids a specific color.
4. Taking it a step further
We can make the use of grids even easier by extracting the html to a Blade component. If you’re using React or Vue you can apply the same approach.
Create a component
Lets make a component and add the html:
<div class="bg-grid-100x100 bg-gradient-to-b from-gray-900 to-black"></div>
Now we can replace the html in the Blade file to:
<div class="w-full py-32 bg-black relative">
<x-grid/>
</div> We can still keep the flexibility of dynamic colours by applying classes:
The component:
<div class="bg-grid-100x100 bg-gradient-to-b from-gray-900 to-black {{$class ?? ''}}"></div>In the Blade file
<div class="w-full py-32 bg-black relative">
<x-grid class="from-white/0 to-white" />
</div> Different grid sizes at different viewports
Having a specific grid size can look great on a desktop screen but might be too big on a mobile screen size. We can make the grid adjust itself with the help of Tailwind.
First we need to create a smaller grid SVG. Let’s say 50px x 50px. Go to your Figma file, duplicate the grid cell by right clicking it and choose duplicate. Or download the smaller grid here.
Next adjust the size via the inspector, and export the layer like we did with the bigger one.
No we extract the grid selector to a more generic grid selector and make specific class selectors for the two grid sizes:
.bg-grid {
@apply bg-repeat absolute top-0 left-0 w-full h-full -z-10;
mask-image: url(/img/assets/grid-100x100.svg);
-webkit-mask-position: center;
mask-position: center;
}
.grid-100x100 {
-webkit-mask-image: url(/img/assets/grid-100x100.svg);
}
.grid-50x50 {
-webkit-mask-image: url(/img/assets/grid-50x50.svg);
}Now we can use tailwind to show a specific grid based on the viewport:
<div class="w-full py-32 bg-black relative">
<x-grid class="grid-50x50 lg:grid-100x100 from-white/0 to-white" />
</div> In conclusion
We’ve created grids from scratch with Figma and with this knowledge you should be able to create any grid size you can think of. With the help of Tailwind you can color the grids any way you like and show different grid resolutions at different viewports. By extracting the grids to components we can reuse them easily and enjoy clean markup.
I hope you now have a good understanding on how to create custom grids. If you have any questions, let me know on Twitt