如何使用css實(shí)現(xiàn)N宮格布局

這篇文章主要為大家展示了“如何使用css實(shí)現(xiàn)N宮格布局”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用css實(shí)現(xiàn)N宮格布局”這篇文章吧。

10年積累的成都網(wǎng)站建設(shè)、做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有桐鄉(xiāng)免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

常見應(yīng)用場景

現(xiàn)在的APP界面基本都是大同小異, 宮格布局現(xiàn)在基本成了每個(gè)APP必然的存在.

帶邊框, 常用在"功能導(dǎo)航"頁面

無邊框, 常用在首頁分類

設(shè)計(jì)目標(biāo)

在scss環(huán)境下, 通過mixin實(shí)現(xiàn)n宮格, 并且可以支持"有無邊框"和"每個(gè)格是否正方形":

@include grid(3, 3, true); // 3 x 3, 有邊框, 且每個(gè)格為正方形

@include grid(2, 5, false, false); // 2 x 5, 無邊框

最終效果

"padding百分比"小技巧

先解釋一個(gè)小技巧, 如何實(shí)現(xiàn)正方形, 保證看一遍就會(huì), 結(jié)論就是:

padding的值如果是百分比, 那么他是相對"父"元素寬度計(jì)算的, 也就是說如果"父"元素寬度是100px, "子"元素設(shè)置padding-top:100%,"子"元素的padding-top實(shí)際上等于100px, 這樣就實(shí)現(xiàn)了一個(gè)正方形(100 x 100). 為了減少干擾, 我們把"子"元素高度設(shè)置為0;

設(shè)計(jì)思路(無關(guān)你是scss還是less)

為了方便內(nèi)部元素水平/垂直居中, 整體我們用flex布局.

使用正方形占位, 因?yàn)橛昧藀adding-top:100%, 所以我們就需要再單獨(dú)用一個(gè)div來裝內(nèi)容, 我給他起名"item__content".

為了讓內(nèi)容的容器div充滿方塊, 我們給他設(shè)置樣式:position:absolute;top:0;left:0;right:0;bottom:0;;

因此我們的html是這樣的:

內(nèi)容...

</div>

代碼(scss)

這里做了3件事:

為了不冗余, 我把公共的部分抽離的出來起名".a-grid";

mixin支持4個(gè)參數(shù), 分別是$row(行數(shù)), $column(列數(shù)), $hasBorder(是否有邊框), $isSquare(是否保證每個(gè)塊是正方形).

mixin內(nèi)部通過計(jì)算并結(jié)合:nth-child實(shí)現(xiàn)"整體無外邊框"的效果,

.a-grid {

display: flex;

flex-wrap: wrap;

width: 100%;

.a-grid__item {

text-align:center;

position:relative;

>.item__content {

display:flex

flex-flow: column;

align-items: center;

justify-content: center;

}

@mixin grid($row:3, $column:3, $hasBorder:false, $isSquare:true) {

@extend .a-grid;

.a-grid__item {

flex-basis: 100%/$column;

@if($isSquare) {

padding-bottom: 100%/$column;

height: 0;

}

>.item__content {

@if($isSquare) {

position:absolute;

top:0;left:0;right:0;bottom:0;

}

@for $index from 1 to (($row - 1) * $column + 1) {

.a-grid__item:nth-child(#{$index}) {

@if($hasBorder) {

border-bottom: 1px solid #eee;

}

@for $index from 1 to $column {

.a-grid__item:nth-child(#{$column}n + #{$index}) {

@if($hasBorder) {

border-right: 1px solid #eee;

}

使用

// 生成一個(gè) 3行3列, 正方形格子的宮格

.a-grid-3-3 {

@include grid(3, 3, true);

}

// 生成一個(gè) 2行5列, 無邊框?qū)m格, 每個(gè)格子由內(nèi)容決定高度

.a-grid-2-5 {

@include grid(2, 5, false, false);

}

提醒大家: 如要做n x m的布局, 用@include grid(n, m)后千萬別忘了在html中添加 n x m個(gè)對應(yīng)的dom結(jié)構(gòu).

以上是“如何使用css實(shí)現(xiàn)N宮格布局”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前題目：如何使用css實(shí)現(xiàn)N宮格布局
網(wǎng)頁路徑：http://bm7419.com/article42/pphjec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)、App設(shè)計(jì)、域名注冊、定制開發(fā)、網(wǎng)站營銷

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容