Creating an Asymmetric Mesh with Grid Layout

At the moment, according to Can I Use , 84% of browsers support Grid Layout . Every month this number is growing. But just recently, this module was behind the flag. Therefore, if you are not familiar with the opportunities that it provides, then it's time to fix it.

As an example, I chose a gallery of images from the Kinopoisk site, which was created using relative positioning. When implementing, we will be guided by the principle of “steal, but improve,” so our gallery will be flexible and adapted to different resolutions.
')
The first step is to create a container under the photo. Each element will be assigned two classes: common, for all photos, and unique (I hope that you do not use identifiers, right?).

<div class="container"> <div class="photo photo1"></div> <!--   --> <div class="photo photo20"></div> </div> 

Our parent element is asked to behave like a gentleman grid-container with a 13 by 4 grid, where each cell is a square with a side of 75 and indents of 5 pixels. For clarity, I added a background color to each block so that you can see the distribution of blocks in the container. Our twenty elements are located in the cells from left to right. If you open the developer tool, you will see the remaining empty cells. Then you will understand why we created them.



Then create an asymmetrical grid of the available elements. We will do this by specifying the starting and ending coordinates of the tracks (the strip between the cells).

 .photo1 { /*    */ grid-row-start: 1; /*    */ grid-row-end: 3; /*    */ grid-column-start: 1; /*    */ grid-column-end: 3; } 

It looks cumbersome. Do not you think?

 .photo1 { grid-row: 1 / 3; grid-column: 1 / 3; } 

Already better, but even shorter.

 .photo1 { grid-area: 1 / 1 / span 2 / span 2; } 

You certainly noticed that we also replaced the triples by span 2 . This is done in order not to count the tracks. We simply tell the browser - through how many cells the element will be stretched. And now we need to do this for each block. By the way, if you do not specify the final position, the element will occupy exactly one cell.

After that, add the elements of the background image that will be scaled with the proportions.

 .photo { background-size: cover; } .photo1 { background-image: url(...); } 

_{^{Visual numbering of tracks. Oh yeah, you can count them from the end, just before the value you need to remember to specify a minus.}}
We will perform the same operation for the next breakpoint, where our gallery will be 10 by 5. All we did was change the value of the grid-area property of the elements and add one image due to the fact that when we redefine the grid empty area. Unfortunately, when creating a media expression, you cannot use the calc function (at the time of this writing, this feature is implemented only in Chrome 66, Firefox 59 and Opera 53), so the calculations are given in the comments to the code. It is considered this way: the sum of the width of the element and its indent multiplied by the number of columns in the previous breakpoint.

 /* (75px + 5px) * 13 columns = 1040px */ @media (max-width: 1040px) { .container { grid: repeat(5, 75px) / repeat(10, 75px); } /*         */ .photo20 { grid-area: 4 / 9 / span 2 / span 2; } } 

At the very last breakpoint, all our images will be the same size, which means that they will occupy exactly one cell. To implement this behavior, we will redefine the number of elements in the container by 20 and set the class photo (each image has this class) grid-area property to the default value - auto . Thus, we reset the parameters set in the previous breakpoint. Now our blocks are automatically distributed into cells from left to right.

 /* (75px + 5px) * 10 columns = 800px */ @media (max-width: 800px) { .container { grid: repeat(4, 75px) / repeat(5, 75px); } .photo { grid-area: auto / auto; } } 

Conclusion

As you can see, the new CSS module is quite flexible and easy to learn. Of course, I did not use in this article all the possibilities that it provides. But already on this example, the power of this tool is clearly demonstrated. I hope that for you this will become a tear-off point in the study of the Grid Layout , and you will be ready to use it as soon as your blog / website can afford to stop supporting old browsers.

UPD: Thanks to the user Loki3000 , a solution was found that is more elegant. You can read about its benefits in the comments to this publication.