Short Guide to CSS Grid
It goes without saying that as a developer having a solid grasp of CSS is not only essential but also leads to much better designed applications.
Though I felt like I had a good handle on CSS, I recently decided to brush up on an aspect of CSS that has always proved tricky for me: grids. While I’ve managed to create grids before in several applications either in CSS or with bootstrap, I’ve had to rely on a lot of googling to come up with my desired layouts.
These one-off questions while able to give me a quick answer did not give me a holistic understanding of how grids work. As a result, I decided to take Wesbos’s course on CSS grids.
I’ll walk you through some of the important high level fundamentals that I learned and found extremely useful through the 25 lessons.
Setting Up Your CSS Grid
At the most basic level to basic grid requires two divs: one for the parent container and the another for the subsequent elements that will go into the grid.
As an example, here is what your html file and CSS should look like to get started:
In the css container selector, there are two important features you’ll need to have to create a grid. The <display: grid;> property sets up the selector as the grid while the <grid-template-columns> and<grid-template-rows> properties defines how you want the grid to be laid out.
In this example, we’re creating two columns — one that 200px and another that is 500px. In the next line, we’re creating three rows — 200px, 100px and 400px. Another important property to be aware of is the grid-gap. This property effectively adds the desired spacing between the elements in your grid.
The item selector is technically not required to have a functional grid layout; however, it gives you a lot of flexibility in terms of styling your elements and highlights an important feature of CSS grid: you can have grids within grids. In this case, I added a grid which in turn gave me the ability to style the content within the element as I saw fit.
Keeping in mind that I added some additional styling, here is what the final product looks like:
You may have noticed that there are two additional rows on the bottom. These are actually implicit rows that are created if you have additional content that was not accounted for. The width and height of the implicit rows are set automatically by CSS grid; though you do have the ability to set the minimum and maximum height and weight values by adding additional properties to your CSS file.
There you have it! A quick guide to getting started with creating a grid layout using CSS Grid.
If you want to continue learning more, I recommend the following resources:
CSS Grid Resources
