您好,登錄后才能下訂單哦!
本篇文章和大家了解一下css實現n宮格布局的簡單示范。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有所幫助。
設計思路(無關你是scss還是less)
1、為了方便內部元素水平/垂直居中, 整體我們用flex布局.
2、使用正方形占位, 因為用了padding-top:100%, 所以我們就需要再單獨用一個div來裝內容, 我給他起名"item__content".
3、為了讓內容的容器div充滿方塊, 我們給他設置樣式:position:absolute;top:0;left:0;right:0;bottom:0;;
HTML代碼
<!-- a-grid是一個flex容器, 方便他的內容做"水平/垂直居中" --> <div class="a-grid"> <!-- a-grid__item用來占位實現正方形 --> <div class="a-grid__item"> <!-- item__content才是真正裝內容的容器 --> <div class="item__content"> 內容... </div> </div> </div>
CSS代碼
為了不冗余, 我把公共的部分抽離的出來起名".a-grid";
mixin支持4個參數, 分別是$row(行數), $column(列數), $hasBorder(是否有邊框), $isSquare(是否保證每個塊是正方形).
mixin內部通過計算并結合:nth-child實現"整體無外邊框"的效果
.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; } } } }
使用
// 生成一個 3行3列, 正方形格子的宮格 .a-grid-3-3 { @include grid(3, 3, true); } // 生成一個 2行5列, 無邊框宮格, 每個格子由內容決定高度 .a-grid-2-5 { @include grid(2, 5, false, false); }
提醒大家: 如要做n x m的布局, 用@include grid(n, m)后千萬別忘了在html中添加 n x m個對應的dom結構。
關于css實現n宮格布局的簡單示范就分享到這里了,當然并不止以上和大家分析的辦法,不過小編可以保證其準確性是絕對沒問題的。希望以上內容可以對大家有一定的參考價值,可以學以致用。如果喜歡本篇文章,不妨把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。