My experience with CSS Grid Layout
With a practical example
Hi again! Today I wanted to write about the power of CSS grids and my experience with them. When I started web development aligning content the way you wanted to was well into the floats and clears. My first portfolio version actually used the floats and clear method because Grids was still not heavily supported. Flex box was a feature I was using though, it worked well, but only for one row of content to be responsively aligned. Bootstrap seemed to be a great hack for aligning content but it still needed you to understand the framework AND add all that code (col col col….).
CSS Grid has made responsive development really easy in my opinion. I first began playing with it and testing it out on my own with some online resources. Make sure to checkout CSS-tricks complete guide to grid layout found here. I was able to implement a nice 3 x 2 grid to showcase my past projects, which is easily set to 2 x 3 on tablet, and 1 x 6 on mobile. Although I was using grid layout for a simple part of my website I knew it was more powerful than this and could construct an entire site to maintain responsiveness on any screen size. It also wasn’t until I watched Morten Rand-Hendriksen’s talk at WordCamp 2017 that I really understood CSS grid layout on another level, and I recommend checking out the VOD here.
It is important to note that you will always need a container around the content you are designing the layout for. This container is to be set with display: grid but this is the easy part. After this, you will then need to setup the grid-template-columns and grid-template-rows. I recommend always drawing up a mockup of the layout on paper, you can even port it to PhotoShop/Sketch and add the grid effect to make it easier. For the columns, start at the top-left as normal and work your way to the top-right of the page marking a column every time you want to space out any content left to right. For the rows start at the top-left again making your way to the bottom-left of the page marking out any row where any content is to be spaced out top to bottom.
Grid Layout also brought us fractions which I love for responsive design. You can fraction out the page accordingly which I find much easier than guesstimating the pixels, try using it with your grid if you can.
When it comes time to assign the amount of rows and columns to your child elements your grid is assigned numbers based on the amount of columns and rows you sectioned. Some layouts can get very tricky with the amount of spacings desired. It is important to note the grid-column first number is where you want the element to start and the last is where it is to end. For example, if you have a 8 columns and you want the element to stretch across the middle 6 leaving a left and right spacing it should look like grid-column: 2/7;. This is really saying place the element from column 2 to 7 and the column 1 to 2, and 7 to 8 will be left empty. As for the grid-row, the same principle is followed but I find myself being very direct with this. The rows I create haven’t had content spanning across multiple rows and to assign an element to a specific row such as the third, simply add grid-row: 3/3; and so on.
Implementing Grid Layout
For my most recent project I designed a website for a gardening company locally with two classmates from school. I was in charge of the prototypes, and came up with a simple layout.
I decided to use a simple grid layout for the navigation first. I broke the desktop navigation down to 1 row, and 3 columns. One column for the logo, one for the first set of navigation links and a final column for the login/signup. This worked perfect to space out the content how I wanted it. I could have used flexbox even, but grid has just been great
The next grid layout I decided to do was for the entire body (after the hero banner/image caption). This included the headline all the way to the bottom of the body. Using the top-left to right for columns, and top-left to bottom-right practice I was able to divide the entire mockup into the columns and rows I suspected I needed.
Here is what I came up with when breaking it up before applying the grid in my CSS. This is the true power of CSS grids!
There is a feature called grid-gap to keep in mind that will apply a spacing between the columns and rows for you, but as long as you have the layout created you can simply omit the allotted column/row for a blank space. This does take some practice to implement in CSS but once you have a solid understanding of the grid layout it will become second nature. Since every screen width is different, it is best to use fractions in my opinion. Here is what the CSS will look like for the container
#body-container {
display: grid;
grid-template-columns: 1fr 2fr 5fr .5fr 2fr 1fr 4fr .5fr 5fr 2fr 1fr;
grid-template-rows: 70px 50px 200px 100px 200px 20px 200px 20px 20px 50px;
}
As for aligning an element, here is an example of paragraph on the third row
.text-block {
grid-row: 3/3;
grid-column: 7/10;
}
This will place the text box on the third row that is 200px in height, while spanning from the 7th to 10th column which is 9.5fr (4 + .5 + 5). Another great thing to keep in mind that chrome developer tools when inspecting the elements shows the grid layout when hovering over the container and any elements inside it. I found this most helpful when gauging the grid. Next is onto developing the grid layout for mobile and tablet!
