Let me share with you my experience with grids and try to convince you that grids are an incredibly versatile and flexible tool for solving many problems. In this article I will not analyze each property and tell what and why it does. This information is extremely easy to find if necessary. I believe in you.
Why grid,not flex?
First of all, I suggest to understand when it is better to use flex, and when grid.
The easiest way is to understand whether it is a one-dimensional positioning or still a two-dimensional one. If we are talking about one-dimensional layout, then, in most cases, it will be enough to use flex (about exceptions below). If we are talking about two-dimensional positioning, then the grid gives incomparably more possibilities. I will explain a little what I mean. If the task is to simply arrange in a certain way several blocks in one line, then we are talking about one-dimensional positioning. If we need to get some kind of grid of elements, then the very name of the grid pushes us to use it.
Why did I fall in love with grids
Grids allow you to position the elements rigidly in any network. At the same time you can juggle with them and the markup itself as you like or as the designer wants it.
Let’s look at the easiest way to use grids.
In this example, elementary grid-laying is used.
Container properties:
display: grid;
padding: 20px; // back margin
grid-gap: 20px; // grid spacing
grid-template-columns: 40px 180px 15px 400px; // set the width and number of columns
grid-template-rows: 90px 40px; // set the height and number of lines (if there are enough elements for more lines than specified in the property, they will be added automatically, but without a strictly specified height).
For the container descendants only the background color is set. No parameters related to size.
Also, I want to give an example from the experience when grids were preferable and easier to use in the case of one-dimensional positioning. Imagine a form in which we need to arrange in one line, while taking up its entire width, 3 input fields of the same width with the same margins of 15px between each other. Actually, one could try to calculate the width of the fields through calc((100% - 30px) / 3)and arrange them in flex through justify-content: space-between;. But I suggest a so much simpler solution. Set grid-template-column: repeat(3, 1fr); grid-gap: 15px; container. And here it is! We got ideally located items.
But the beauty of grids is not limited by this. Smart people added such wonderful things as:
- “fr” unit of measurement. Analog of “flex-grow” in grids. It works in the same way, but is set in the container layout.
- “repeat({count}, {width})” for “grid-template”. Allows to write: “grid-template-columns: repeat(1000, 2px);“ and get 1000 columns 2px wide each.
- “mimax({min value}, {max value})” for “repeat”. For example: “grid-template-columns: repeat(4, mimax(20px, 1fr))”. In this example, the mesh elements will change their size flexibly, ranging from 20px to the maximum available width. Thus, it is possible to get much more flexible elements that will build on the width of their internal content and change their dimensions accordingly.
And finally, my favorite ones, allowing me to add the flexibility to the strict grid for dynamical change depending on the content. These are “auto-fill” and “auto-fit”. Very similar features, allowing you not to write a specific amount for “repeat”. For example: “grid-template-columns: repeat(auto-fill, minmax(40px, 1ft))”. No matter how many descendants the container will have, they will always occupy the entire width of the parent and are evenly distributed across the grid.
In this screenshot, you can see how we got a flexible, but a strict layout in the container regardless of the number of descendants and the size of their content with only one feature .grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
I will give an example of a very real case, when nothing but a grid could solve the problem of flexible positioning. Suppose that we have a task to arrange the square avatars of employees so that they occupy the entire width of the parent, have the same margin between each other from all sides and the most difficult thing is not to lose a grid and not to shift the images to the center and etc. when going to a new line. And besides, all this is as flexible as possible, for any number of images and any screen size. You can try to come up with a solution without using grids (without js, by itself), but I doubt that you will succeed. Thinking hard for a while, I saw the miracle of grids. Everything was solved incredibly simple.
Set for container:
// required image width
grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
// required margins
grid-gap: 20px;
padding: 20px;
Now we wrap the images in div and set only two properties:
width: 100%;
vertical-align: middle;
Done! Look how we have arranged these good boys.
And now, it is time to get acquainted with the wonders of the truly magical properties of grid-template-areas. But what is the feature? And the fact that it allows you to mix components and stretch them on the grid, as you like, without even thinking about exactly how they are located in a real DOM.
The simplest example would be page layout. Let's model the task. It is necessary to impose the main frame of the page, where we have: header, sidebar (which should stretch throughout the page, regardless of the amount of content, and possibly consist of two independent parts located at the bottom and top of the page, respectively), the main block with content and the footer (which should always be pressed to the bottom of the page , regardless of the height of the content). All this should remain in place, regardless of the presence of other components. At the same time, the location of all elements should change when the screen is resized.
Grids allow you to solve this problem effortlessly.
All we need is:
- to stretch the body to full height and set display: grid;
- to add there:
- grid-template-columns: 200px 1fr;
- grid-template-rows: 70px 1fr 400px 50px;
- grid-template-areas:
- 'header header'
- 'top-sidebar main-content'
- 'bottom-sidebar main-content'
- 'footer footer';
- to set the descendants corresponding to their place grid-area
And now, pay attention to how it is located in DOM.
At the same time, we can safely manipulate the location and layout using media queries and drastically change the location of elements, as it pleases.
The scope of the grid-area, of course, is much broader than the global layout and is limited only by the imagination of the developer.
And that’s not all. As an interesting feature for laying you can use the properties of personal positioning for each element of the grid. I will not focus on this topic and just say that using z-index, grid-row and grid-column inside the grid like grid-template: 15px repeat(19, 1fr) / repeat(20, 1fr); I could create such a collage of six completely different images spread in DOM in an absolutely random way.
Of course, the grid is not the answer to any question. This means that in addition to its miraculous and almost magical properties, it also has some weaknesses. For example, sometimes it is too strict, and in such situations it is often more convenient and even more correct to use flexs or something else. Also, not all grid properties are well supported in some browsers. Although, the properties presented in this article are really well supported.
Maybe it’s just a perfunctory discussion of the grids’ features,but the goal was to share my interesting experience of acquaintance with this amazing technology and encourage you to study this incredibly powerful tool.
