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)
2. How to align elements to the right (justify-content: right)
3. How to center elements horizontally and vertically
4. How to justify elements (justify-content: space-between)
5. How to align whole content to the top, bottom and center vertically (align-content)
6. How to align all items to the right, left and center inside column (justify-items)
7. How to align all items to the top, bottom, center, and stretch of the column (align-items)
8. How to align all items center vertically and horizontally in the column (place-items)
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.
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