Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to achieve multi-grid layout of css, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Multi-grid layout

Multi-grid layout refers to the space-occupying layout in which the nodes in the container are arranged in the form of a dynamic number of grids. The photo album of Wechat moments is the most common multi-grid layout, when a single photo arrangement, two photos arrangement, three photos arrangement and so on, the size of the photos may not be the same in each case. The author made a dynamic multi-frame photo album in memory of my dog AB. Feel the pure CSS to achieve a dynamic number of multi-grid layout.

Leave a suspense here, do not explain how to achieve, see if you can try to restore the effect according to the tips listed by the author. The main principle is to limit the range of nodes according to the structure selector, and the answer to the principle can also be found in this article. Remember to look at the following source code after implementation!

@ mixin square ($count: 2) {$length: calc ((100%-# {$count} * 10px) / # {$count}); width: $length; height: $length;}. Multigrid-layout {display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; padding: 5px; border: 1px solid # ccc; border-radius: 5px; width: 400px; height: 400px Li {display: flex; overflow: hidden; justify-content: center; margin: 5px; background-color: # f0f0f0; @ include square (3);} img {width: 100%; height: 100%; object-fit: cover;}} / / an element. Item:only-child {border-radius: 10px; width: auto Max-width: 80%; height: auto; max-height: 80%;} / / two elements. Item: first-child:nth-last-child (2), .item: first-child:nth-last-child (2) ~ .item:nth-child (2) {@ include square (2);} .item: first-child:nth-last-child (2) {border-radius: 10px 0 0 10px Item: first-child:nth-last-child (2) ~ .item:nth-child (2) {border-radius: 0 10px 10px 0;} / / three elements. Item: first-child:nth-last-child (3), .item: first-child:nth-last-child (3) ~ .item:nth-child (2), .item: first-child:nth-last-child (3) ~ .item:nth-child (3) {@ include square (2) Item: first-child:nth-last-child (3) {border-top-left-radius: 10px;} .item: first-child:nth-last-child (3) ~ .item:nth-child (2) {border-top-right-radius: 10px;} .item: first-child:nth-last-child (3) ~ .item:nth-child (3) {border-bottom-left-radius: 10px } / / four elements. Item: first-child:nth-last-child (4), .item: first-child:nth-last-child (4) ~ .item:nth-child (2), .item: first-child:nth-last-child (4) ~ .item:nth-child (3), .item: first-child:nth-last-child (4) ~ .item:nth-child (4) {@ include square (2) Item: first-child:nth-last-child (4) {border-top-left-radius: 10px;} .item: first-child:nth-last-child (4) ~ .item:nth-child (2) {border-top-right-radius: 10px;} .item: first-child:nth-last-child (4) ~ .item:nth-child (3) {border-bottom-left-radius: 10px Item: first-child:nth-last-child (4) ~ .item:nth-child (4) {border-bottom-right-radius: 10px;} / / five elements. Item: first-child:nth-last-child (5) {border-top-left-radius: 10px;} .item: first-child:nth-last-child (5) ~ .item:nth-child (3) {border-top-right-radius: 10px Item: first-child:nth-last-child (5) ~ .item:nth-child (4) {border-bottom-left-radius: 10px;} / / six elements. Item: first-child:nth-last-child (6) {border-top-left-radius: 10px;} .item: first-child:nth-last-child (6) ~ .item:nth-child (3) {border-top-right-radius: 10px Item: first-child:nth-last-child (6) ~ .item:nth-child (4) {border-bottom-left-radius: 10px;} .item: first-child:nth-last-child (6) ~ .item:nth-child (6) {border-bottom-right-radius: 10px;} / / Seven elements. Item: first-child:nth-last-child (7) {border-top-left-radius: 10px Item: first-child:nth-last-child (7) ~ .item:nth-child (3) {border-top-right-radius: 10px;} .item: first-child:nth-last-child (7) ~ .item:nth-child (7) {border-bottom-left-radius: 10px;} / / eight elements. Item: first-child:nth-last-child (8) {border-top-left-radius: 10px Item: first-child:nth-last-child (8) ~ .item:nth-child (3) {border-top-right-radius: 10px;} .item: first-child:nth-last-child (8) ~ .item:nth-child (7) {border-bottom-left-radius: 10px;} / / Nine elements. Item: first-child:nth-last-child (9) {border-top-left-radius: 10px Item: first-child:nth-last-child (9) ~ .item:nth-child (3) {border-top-right-radius: 10px;} .item: first-child:nth-last-child (9) ~ .item:nth-child (7) {border-bottom-left-radius: 10px;} .item: first-child:nth-last-child (9) ~ .item:nth-child (9) {border-bottom-right-radius: 10px } Thank you for reading this article carefully. I hope the article "how to achieve multi-grid layout of css" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.