To be honest, it took me a while to open up to messing around with CSS. I initially thought it was dumb and annoying and that it was stupid… But it was even more frustrating not being able to get my HTML to stay where I wanted it to be. So I learned CSS Grid and soon realized that the more I knew how to use CSS the easier (and more pleasant) web development became.
So for all my peers who feel like this when it comes to CSS.
Here's a painless overview of what CSS Grid can do for you.
The Simple Grid
CSS Grid is one of two major layout systems used within web development (the other being Flexbox), which can largely impact your website's design and thus user experience. It gives you the power to create… well… a Grid.
But this grid can be specified to your needs depending on how you write out the CSS. Unlike flexbox, which is largely a 1-dimensional system, CSS Grid is 2-dimensional, which allows it to create and handle both columns and rows. This allows you to write rules for both the parent element (grid-container or grid-wrapper) and the parent element’s children (grid-items).
We create a grid container by declaring the parent elements display to ‘grid’:
Once this has been set, all the child elements will become grid-items.
Currently, the grid is in its simplest form, a single column containing the five children. So you might not see much of a difference now, but let's add some columns and rows.
Adding Rows & Columns: Grid Tracks
We define rows and columns on our grid with the grid-template-columns and grid-template-rows properties within the .wrapper/.container’s css. This will define the grid tracks: the space between any two lines on the grid.
So back to creating rows and columns.
We can use grid-template-columns to define both the number of columns within the grid, as well as a fixed or dynamic value for the width of the columns, either individually or as a whole. Similarly, grid-template-rows will do the same for the number of rows and height of each row within your grid.
Below we see that within the grid-container, we are defining a grid with 5 columns and 3 rows, each with individually set values for width and height respectively.
The above CSS will create a grid with these dimensions.
Notice, that as you define the number of columns and rows, you also define the number of grid lines within the grid. These lines are important for defining how many cells a grid-item will take up within the grid, which will create a grid-area. As you define grid areas, it can be helpful to name these lines so you know exactly where you are placing your grid-items.
This will now render the same grid, but with different line names:
Once the grid lines have been delineated within the grid-container, you can set the values for grid-column-start, grid-column-end, grid-row-start, and grid-row-end properties within the grid-items’ CSS to designate how many cells that element will take up from the grid.
Sidebar: repeat() & fr
If your grid-template-columns definition contains repeating parts, you can use the repeat() function.
Which is the same as this:
If multiple lines share the same name, they can be referenced by their line name and count like so:
Now lets say you’d rather not have fixed dimensions, so your grid can expand to the available space available. You can use the handy ‘fr’ unit. The ‘fr’ unit allows you to set the size of the track as a fraction of the available space of the grid container.
Back to grid-areas: grid-template-areas & grid-area
Another way to define grid areas is to use the grid-template-areas property and the grid-area property.
The grid-template-areas property is written within the grid-container’s CSS, and works hand in hand with the grid-area property found within the grid-item’s CSS.
The grid-template-areas “defines a grid template by referencing the names of the grid areas which are specified with the grid-area property” on the grid-item’s CSS. Essentially, you’re providing each cell a name, and the grid-item with the corresponding name will fill up the cells associated with it.
The above CSS will create a grid design like so:
Notice that with grid-template-area, you’re not naming lines with this syntax, just the areas (grid-cells), instead, the lines on either end of the areas are actually getting named automatically. So in the above example. The ‘header’ area, starts at col-1 / row-1, and ends at col-5 / row-2; within this context, they would be names ‘header-start’ and ‘header-end’ for both col and row lines.
Sometimes you want some space between your columns and rows. When that's the case you can use the column-gap and row-gap properties to create space or ‘gutters’ between the grid-cells (not on the outer edges though):
There's plenty more to learn…
As with most things within web development and computer science, there’s always more to learn about any given topic, so I’ll leave some aspects of CSS Grid for you to discover on your own (like shorthand notations, justifying/aligning content, minmax, auto-fit, etc.). But here are some of the main principles and properties that I’ve found to be critical in my understanding of CSS Grid and essential to my own sites that I develop. And if you’re like I used to be, completely against CSS, then I sincerely hope this helps alleviate the frustration and makes your relationship with it a little better.
Thanks for reading and here are some super informative sites for learning more!