css如何實(shí)現(xiàn)多格布局

這篇文章主要介紹了css如何實(shí)現(xiàn)多格布局，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

多格布局

多格布局指容器內(nèi)節(jié)點(diǎn)以動態(tài)數(shù)量的格子形式排列的占位布局。微信朋友圈的相冊就是最常見的多格布局了，當(dāng)單張照片排列、兩張照片排列、三張照片排列等等，每種情況下照片的尺寸都可能不一致。筆者制作了一個動態(tài)多格相冊懷念我家狗狗AB。大家感受下純CSS實(shí)現(xiàn)動態(tài)數(shù)量的多格布局吧。

在此留個懸念，不講解如何實(shí)現(xiàn)，看看大家能不能根據(jù)筆者列出的提示嘗試將該效果復(fù)原。主要原理是根據(jù)結(jié)構(gòu)選擇器限制節(jié)點(diǎn)范圍實(shí)現(xiàn)，在本文也可找到原理的答案喔！記得實(shí)現(xiàn)完再看以下源碼哈！

<ul class="multigrid-layout">
    <li class="item"><img src="https://static.yangzw.vip/codepen/ab-3.jpg"></li>
    <li class="item"><img src="https://static.yangzw.vip/codepen/ab-3.jpg"></li>
    <li class="item"><img src="https://static.yangzw.vip/codepen/ab-3.jpg"></li>
    <li class="item"><img src="https://static.yangzw.vip/codepen/ab-3.jpg"></li>
    <li class="item"><img src="https://static.yangzw.vip/codepen/ab-3.jpg"></li>
    <li class="item"><img src="https://static.yangzw.vip/codepen/ab-3.jpg"></li>
    <li class="item"><img src="https://static.yangzw.vip/codepen/ab-3.jpg"></li>
    <li class="item"><img src="https://static.yangzw.vip/codepen/ab-3.jpg"></li>
    <li class="item"><img src="https://static.yangzw.vip/codepen/ab-3.jpg"></li>
</ul>

@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;
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css如何實(shí)現(xiàn)多格布局”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!