css如何实现多格布局

这篇文章主要介绍了css如何实现多格布局，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

多格布局

多格布局指容器内节点以动态数量的格子形式排列的占位布局。微信朋友圈的相册就是最常见的多格布局了，当单张照片排列、两张照片排列、三张照片排列等等，每种情况下照片的尺寸都可能不一致。笔者制作了一个动态多格相册怀念我家狗狗AB。大家感受下纯CSS实现动态数量的多格布局吧。

在此留个悬念，不讲解如何实现，看看大家能不能根据笔者列出的提示尝试将该效果复原。主要原理是根据结构选择器限制节点范围实现，在本文也可找到原理的答案喔！记得实现完再看以下源码哈！

@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;    }}// 一个元素.item:only-child {    border-radius: 10px;    width: auto;    max-width: 80%;    height: auto;    max-height: 80%;}// 两个元素.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;}// 三个元素.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;}// 四个元素.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;}// 五个元素.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;}// 六个元素.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;}// 七个元素.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;}// 八个元素.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;}// 九个元素.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;}

感谢你能够认真阅读完这篇文章，希望小编分享的"css如何实现多格布局"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!