Last week, I started my journey in CSS, and it was a relief to know things weren't as hard as I thought they were. I explored the world of flexbox, where I found that it was extremely easy to fill the page using a system that allows for the elements you create to fill up the page either as columns and rows. Not only that, but you were able to align these items on the vertical or horizontal axis using the convenient justify-content and align-items commands. With flexbox, making a grid system was easy, because now you could always guarantee that your rows or columns would align responsively on the page.
Although flexbox is great for certain things like proper spacing, and responsive behavior, this week I discovered the display: grid system, which allows you to directly place elements on two dimensions. With grid, you can easily create custom layouts. Let's get right into it.
The first thing you have to do with a grid system is put the display: grid command into the parent element. That's it for the parent element! Whatever is now inside this parent div will have access to creating the grid system (rows and columns) inside of this parent element. There are other attributes we can put inside of this parent element, but we'll get back to that during our example problem.
The child element can take in two parameters which will determine what row and what column it will be on in the parent element. We don't specify in the parent element that we will have 3 columns and 2 rows. The number of rows and columns in a grid is all determined by what rows and columns are represented in the child elements. We will get into what the actual syntax looks like for this in the example.
Before that, let's take a look at a model for what is meant by a row and a column in a grid system. Here is a diagram of a grid layout, where the .wrapper class is the parent element.
You'll notice that the numbers aren't on the children element themselves, but rather on the gaps between the children elements. Telling a grid layout that you want the child element in the space '1' isn't going to give you the result you want. You need to say that it exists in between the gap 1 and 2. You can imagine that these gaps exist on the row and column axis, and you will be able to place your element on the exact row and column position. Let's take a look more at a pretty interesting problem to explore what is possible with the grid system.
This is the famous Mondrian painting "Composition with Red, Blue and Yellow" painted in the 1930's. You'll notice that this painting is essentially a grid system, with rows and columns of different sizes. For our purposes of learning how to create grid systems, we'll be attempting to recreate this funky looking 'grid'. I wouldn't even know where to start with flexbox with the different sized rows and columns, but with grid it's very easy.
The first thing to take note of in our grid is how many rows and columns there are. You'll see that there are 3 columns, and a maximum of 4 rows, given the split that happens on the bottom right side of the painting. Knowing this much, we can assign the relative position of our children elements. This is what the actual CSS for that would look like.
You'll notice that every child has a grid-row and grid-column attribute with the starting gap and the ending gap to place it in it's correct relative position. I also went ahead and added the proper background color for the children elements. This is the current result.
It's a start, but the rows, columns, and gaps are not the correct sizes. For that we'll need to go back to the parent class and add the attributes grid-template-rows, grid-template-columns, and grid-gap. These will allow you to control exactly how the spacing is going to work out in your grid system. Here's what our parent wrapper class looks like after adding these attributes.
The numbers you see after the grid template attributes are the sizes that you want the rows and columns to be in the correct order. For this exercise where we needed precise sizing, we used pixels, but you can use any other values that you would normally put into the width/height properties like percentages. I also adjusted the height and width of the wrapper to accomodate for the total height and width of all rows and columns.
One other topic I want to take a look at is how the grid system ends up reacting when your children class don't perfectly fill up the grid's rows and columns. What happens when you just get rid of some of our example's children's properties?
How will the system rearrange itself now that we are missing row and column placing for 4 of our children? Will the system omit them from the grid? Will they be placed at the end of the grid without styling? Here's what happens.
We still have the styling for the a, d, and g boxes, so those are still in their proper positions. The way the other boxes behave are guided by two factors: 1) what is the number of rows and columns (represented by the maximum row and child gap present in children; g in this case) 2) What is the first available 1 row by 1 column space that is available. These boxes all stack themselves on the first 1x1 spot avilable that exists in this current grid system. You'll notice they not only follow the maximum number of rows and columns available but even retain the sizes set in the parent element. There's many other circumstances not covered in this one example, but the point is the grid system predicts how children with missing attributes should fit. Cool little tidbit, but of course you'd normally fill in all the required attributes.
Having the power to place your elements on a two dimensional plane as opposed to the merely one dimensional flexbox framework, you are now able to place elements on the page with ease. Ideally, you should handle all the things regarding the general two dimensional layout with grid, and the spacing that pertains to individual grid points with flexbox. There are more things I didn't cover, but think of all the layouts you can make with just what was covered here. Layouts are a breeze with grid.
Top comments (0)