CSS Grid Tutorial

When we build front-end, always we need to create a structure of our page, and very often, we need to create any grid. We can position elements in a few ways. For example, in the previous article, I showed you how we could do it via flexbox.

So, today, I would like to show you one more tool which I want to use, named CSS Grid. Let’s see the most popular (and most often used by me) methods which can save a lot of our time.

1.How to align elements to the left (justify-content: left)

If we would like to align all of the elements (content) to the left side of the container we can easily do it by just adding to our container property justify-content: left.

2. How to align elements to the right (justify-content: right)

Similar to the previous example, if we would like to align all of the elements (content) to the right side of the container we can easily do it by just adding to our container property justify-content: right.

3. How to center elements horizontally and vertically

If we know how to align all of the elements to the left and right side, what if we would like to center the content? We can do it as well! But what if we would like to center all the content vertically and horizontally? We need to use two methods. The first one will be justify-content: center, and the second method will be align-content: center. We need to add these two properties to our container.

4. How to justify elements (justify-content: space-between)

One more method which is worth to mention is justifying content, which we can easily achieve by the same method as examples above. We just need to use justify-content: space-between inside our container.

5. How to align whole content to the top, bottom and center vertically (align-content)

Now we will focus on aligning the whole content to the container vertically. To all examples, we will use the align-content method inside our container. If we would like to align the entire content to the top, we will use align-content: start. If we would like to do the same, but to the bottom, we will use align-content: end. But If we want to center content, we will use align-content: center method.

6. How to align all items to the right, left and center inside column (justify-items)

Now we know how to align whole content to the container, but what if we would like to just position items, inside cells? To do it horizontally, we can use the justify-items property. If we would like to align all items to the left side of the cells, we will use justify-items: start. If we would like to align all items to the right side of the cells, we will use justify-items: end. And if we would like to align all items center inside cells, we will use justify-items: center.

7. How to align all items to the top, bottom, center, and stretch of the column (align-items)

Similar to the previous example now we can align all the items to their cells, but vertically. To do that, we will use the align-items method inside a container. First, we can align all items to the top of their cell, by method align-items: start. Next, we can do the same, to the bottom by method align-items: end. The third possibility is to center items, by align-items: center. And the last one is to fulfill the height of the cell, by using property align-items: stretch.

8. How to align all items center vertically and horizontally in the column (place-items)

If we just would like to center item to his cell horizontally and vertically we can do it very easy by using method place-items. We need to remember if we use method place-items to use two centers, like place-items: center center.

9. How to align x item to the right, left and center inside column (justify-self)

In the previous example we were positioning all elements to their cells, but what if we need to position only one element? We can do it by justify-self. First, we can set up it to the left, by justify-self: start. Next, we can align the element to the right side of the cell by justify-self: end. We can center item to the cell as well by justify-self: center.

10. How to align x item to the top, bottom, center, and stretch of the column (align-self)

If in the previous element we did aligning items, to the cells horizontally, now we can align elements vertically. For that, we will use the method align-self inside our item. If we need to align items to the top of the cell, we use align-self: start. If we need to do the same, but to the bottom, we use align-self: end. For centering items vertically to the cell, we can use align-self: center. And if we would like to fulfill the height of our cell, we can use align-self: stretch.

11. How to align item center vertically and horizontally in the column (place-self)

As with content we can center item to the cell vertically and horizontally. We can do it by place-self: center center in the item.

12. How to set up grid columns and rows

Now we will focus on creating a whole grid. I use two methods for that, and now I would like to show you first of them where we will specify each column and row and next pass elements there. We will start by specifying all the columns which we have in pattern [name of the column] width of the column. If we have columns, we can create rows in the same pattern [name of the row] height of the row. If we have a grid, we can put elements into it in a patter grid-column: from which column element should start / to which column element should be. Next, we need to specify rows in a similar pattern, grid-row: from which row element should start elements height / until which row element should be visible.

13. How to setup template of the grid

When we know the first method of creating grid, we can see the second one, very helpfull with static websites. We create grid specifying columns and their width, like grid-template-columns: width of column1 width of column2 width of column3, etc. Next, we define rows in similar patter, but with height. If we have rows and columns, we can specify our grid-template-areas by a pattern like in the example above. One name of an element means it will take the length of the column, and if we have the same name two times, it will fill 2 columns, the dot is an empty column. Every line in the grid-template-areas is a new row. If we have a template, we have to put their elements by adding grid-area: name of the element inside elements in CSS.

Conclusion

That’s it! You can find much more information about the grid, and their tips and tricks, but these 13 are the most popular ones, and I use them the most. I hope it will be enough for you to start building websites with a grid, and you will be able to save a lot of time. Thanks for reading! Anna from Duomly

Twitter LinkedIn Pinterest