How to use the CSS grid to implement a design on a website that uses Gatsby and styled-components. And why it's useful.
I'm gonna show you how to implement a CSS grid on one of the most trendy/popular tech stacks out there for front-end development. Gatsby, and styled-components. We are going to implement a design that’s perfect for a CSS grid, where you would have needed to write plenty more code if you wanted to implement it with flex-box or in other ways.
The CSS grid is a neat tool for us developers if we want to implement a tricky design but it's also essential if we want the designers to be able to work more systematically since the grid reduces the design possibilities.
“The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.”
-Josef Müller-Brockmann
The design.
Finding the grid.
The first thing you should do is look at the design and recognize how the grid is set up or if you can just ask your designer and have him show you the grid. What we see here is a design where the header section is divided into 4 columns, where the name of the company and date takes up 1 column, the title and image take up two columns, and its an empty column between the two.
The header of the product section is set up the same way, but you can see that the product section uses another grid. It's instead setup with three columns with a column-gap(the space between two columns) of 16px.
The design with the grid shown.
How to configure the project.
I won't go through how to install Gatsby, the font and styled-components so here are some tutorials for that. If you're having trouble with it, reach out. :)
GATSBY
STYLED-COMPONENTS
FONT LOADER
FONT
https://fonts.google.com/specimen/Space+Grotesk
Let's get started.
When you have created a Gatsby project and dived into the project you will probably get met by their placeholder code, to continue just remove everything between the two layout tags. So it looks close to something like this:
Great job, now we can start with the coding! The first thing to do is to edit the layout file so we get the correct padding around the grid. This can be done in a million ways but in the case, I made a LayoutWrapper component with a main element inside it so if needed we could put a max-width on it. And inside of the main element, we put all children(in this case the index file).
Creating a grid component.
The next step is to create a grid component, this could be done manually each time but I'm a big fan of trying to split the code into components and making it reusable. The grid component needs to be able to produce multiple different kinds of grids, especially in this case when the design has two different grids(3 & 4 columns grids).
To get the CSS grid to work you need to set display to grid and set a grid template (grid-template-columns for horizontal grid) it accepts values like “20px, 2rem, 20%”.
In our case tho when we want either 4 or 3 columns grid with the same column width we can use the repeat function that works like this: repeat(amount of repeats, column width). And if we want the same size for all columns we can use the new fr unit, fr is a fractional unit and 1fr is for 1 part of the available space.
Then we send in the column count into the styled component GridWrapper so it can produce multiple grids.
Using the Grid Component.
Let’s start using the component, put it into the index.js file inside the layout tag. Insert the number of columns(4) needed and the gridColumnGap(32px). Because we linked the Grid style with GridWrappers style we can add the styling to the parent.
Adding the content.
To make it easier to add the content to the site, I created a styled component named ColumnWrapper with display: flex and flex-direction: column. This is fully optional but I personally prefer having components with clear names instead of just divs to make the code more easily understood.
According to the design we got 2 items that need to be placed out, the first one got one column width, the other one got a two-column width, and between them a one column empty space. Let's start with the first item.
To make it easier for me in this tutorial I wrote some of the styling inline. If you're working on a real project I 100% advise you to use either some parent style for all h1,h2, and so forth or creating different components for the text styles.
Because item 2 has a two-column width we need to set the “gridColumn” to “span 2” which makes the item span two columns.
We still have one more thing to do before we are done with the header section, we need to add the empty column between the two items. This can be done in a couple of ways but I think the easiest way sometimes is to just add an empty element in this case a ColumnWrapper between the two items.
Product Cards Header
As you can see the card header has the same grid, so we can just reuse that and start adding the content. It’s identical in all ways except for the fact that it doesn't have an empty column. This time you can clue out how to implement the design yourself or just copy the gist below.
Button Component
Product Cards
Alright, now it gets a bit exciting again. We got a new grid, that consists of three columns instead of four! So this time we put in 3 instead of 4 in the Grid component, and we change the gridColumnGap to 16px.
I made a product card styled-component that takes in an image and a title, it looks like this:
To make it easier for us, I created a JSON object that contains an image and a title for each product. So we don't need to handwrite it! I saved the JSON as ProductItems.json in a folder I created called data.
Awesome! Let’s import the data so we can map it and push out our product cards.
Is it working and looking like it should? I dearly hope so, if not you can check out my repo for this tutorial(https://github.com/Marwil96/CSSGridTutorial) or send me questions at hi@williammartinsson.com.
BONUS SECTION, LET THE USER BE ABLE TO CHANGE THE GRID.
If you want to challenge your grid you can make it possible to let your user change it. Readers that paid attention might have noticed the change grid buttons, we can make it so these buttons change the grid through setState.
Add State
The first thing we should do is importing the useState hook and then create a gridSize state like this:
The 3 in the useState is the starting amount of columns in your product card grid. You can change it to whatever number you feel like. To make it possible to change that number we need to add onClick functions to our ChangeGridButtons.
The buttons can be written in a more readable way, probably the best way to do it is to create an array with all the SVGs and loop it and set the setGridSize to the index. I felt it would be harder to understand the code if I did that in the tutorial but please try it yourself.
Now we got a gridSize that can be changed by user input! Add the gridSize to the column param on the grid component to make it able to change the number of columns.
Great job! I hope this tutorial has been of use to you. To check out more things I'm currently doing follow me here or go to my website: williammartinsson.com.
