TL:DR – Get to the code

Setting up the grid

CSS Grid caught my attention while binge watching a Clone X website on Youtube. Obviously I’ve been living under a rock because I didn’t even know what it was.

I started to dig deeper and what I found blew my tiny mind.

The HTML

This one is pretty straight forward. We’re creating an overall container that is going to be the base for all of the cells for the grid.

Within this container, we’re creating all the elements that will eventually be placed in various areas of the grid.

The CSS

Plain

With the code below, we’re defining display: grid; which kicks off the grid process. Now we can define how many rows and columns we need.

grid-template-columns: We’re specifying Columns we want.
grid-template-rows: We’re specifying how many Rows we want.

1fr is in reference to a fractional size of the grid.

FR Units “Fr is a fractional unit and 1fr is for 1 part of the available space.“

Below, we’re defining 3 cols and 4 rows. I want the columns to be ever so slightly larger as they go across the screen.

Using Firefox inspect we can view the grid in all it’s glory

Pegi 3

Things get a little more interesting once we start using grid-template-areas. I wasn’t a fan of this set up as it looked a little ugly at first, but it makes creating layouts much faster.

We simply name every section of the grid based on what we want it to contain later.

The columns and rows have to match what you’ve specified with grid-template-columns: and grid-template-rows:, so 3 x 4.

So below you can see I want my main section to fulfill 4 of the available cells in the grid. Candy will fill 3 horizontal rows in the final column.

Placing your elements inside the grid

Now that we have the grid set up we can place elements in the cells. There seem to be 4 ways to define how your elements fit inside the grid.

Verbose

Shorthand

Team Mates = 🙄

The order of these values are:

Pegi 3

This version literally allows you to place any element in any cell within the grid. It’s almost like the webpage became my new photoshop canvas. I’m super excited to start playing around with this tool.

Now I can just throw in a few background colours and a background image in the css and presto chango.

The next task will be figuring out how to implement this within a Rreact project without creating a tonne of mess and repeated code.

Code