As announced, this week my focus has been entirely on the CSS Grid properties. The first theory, then practice. Knowing Flex and Grid, I seriously wonder why Bootstrap or Bulma needs it? I wonder so much that I think I’ll put one of these backgrounds in the science plan for 2020.
What you can do with CSS Grid properties?
Coming back to Grid, like in the case of Flex, in this week’s summary I will focus on presenting the most important issues related to this tool and a short summary of the possibilities it gives.
Grid, like Flex, affects direct children of the element in which we set the CSS display: grid property. However, just setting the display: grid parameter is not enough to notice any changes in the page appearance. In the minimum version, we also need to specify how many Grid columns should be divided our container.
However, the speakers themselves are not everything. The biggest advantage of Grid is that it allows us to divide the selected container into any number of columns and rows. Thanks to this, we obtain a “net” in which we can freely place content. Could it be better? Of course yes.
Apart from the possibility of creating any grid in a selected page element, Grid also allows adjusting the number of columns/rows to the content of the content. As you can imagine, this feature is great for creating responsive websites. In practice, designing a good looking website on different sized screens may not require you to use media queries at all. Wonderful right?
How to build webpage layout in CSS witch Grid?
Let’s go back for a moment to building the layout of the item, which we have given the display: grid property. Using grid-template-rows and grid template-columns, we can create any number of columns and rows. For example:
The code written above will create 4 columns with widths: 1fr, 1fr, 2fr, 200px, and four lines with heights 100px, 200px, 400px and 100px.
Column and row sizes can be specified in all CSS-supported units including the calc function. Moreover, the repeat function is very helpful when creating a layout. It allows us to create multiple columns or rows without writing long lines of code, e.g .:
The magic of website responsiveness can be obtained by using automatic generators offered by Grid:
Auto-fill – counts how many columns or rows it should generate to contain all elements or fill the entire container, e.g. grid-template-columns: repeat (auto-fill);
Auto-fit – it will also create automatically the number of columns or rows, but empty columns will be 0px wide/high;
Creating columns and rows automatically isn’t all, Grid also has properties that allow you to automatically adjust the size of the column / row to the content:
Max content is a virtual unit that takes up exactly as much space as needed for the content of the largest box in a given column or row to be displayed correctly.
Min content is a virtual unit that takes up exactly enough space to pack content without overflow.
Min-max function – allows you to set the minimum and maximum value of a row column, e.g.: grid-template-rows: repeat(2, minmax(150px, min-content));
How to place elements in CSS Grid
As for the location of subsequent elements in the grid, they are arranged from left to right, from top to bottom, in the order in which they appear in the HTML code. If we want some element or elements to be displayed in a different order, we can give them the property order and specify a number that will be interpreted by Grid as the priority of the element.
Knowing that Grid allows you to create a grid on the webpage, you may wonder what about elements that are larger and don’t fit in one column/row? That’s a great question. There are two solutions, depending on what we want to achieve. If we need one element to extend beyond the container, it is enough to set the size of such element and unless we set the min-content property, then such element will “stick out” outside the container.
The second way is to define an area spanning several columns/rows. It can be defined as grid-area. There are several ways to define it. You can specify the numbers of columns and rows that the grid-area should occupy, give the starting box and define how many more the grid-area should cover, or specify the start of the area and indicate that the area should end at the edge of the container.
How to align content in Grid box?
So far, we’ve covered how to place elements in the grid. It’s time to position the elements in relation to the box they are in. You can define the positioning of items in a container using properties:
- Justify-items;
- Aling-items;
- Justify-content;
- Align-content;
Additionally, you can position a single element using the properties assigned to that element:
- Justify-self;
- Align-self.
Why I love Grid?
Grid is a great tool for creating layouts on the website, and in combination with flex, they create a tool that significantly facilitates the work on the website. I personally fell in love with these two tools.
CSS Grid documentation you can find on Mozilla Web Docs.
This week I spent sixteen hours working with websites, most of them working on a website project for my daughter. This project will be a nice summary of what I have learned so far. I will definitely boast about the effects of my work on the blog.
Ps. Here I put some summary about the First big website project.