TL:DR – Get to the code
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.
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.
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
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-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.
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.
The order of these values are:
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.