資訊專欄INFORMATION COLUMN
摘要：前言柵格通常捆綁在各種框架中，但有時(shí)你需要自己去定制一個(gè)柵格來滿足實(shí)際的業(yè)務(wù)需要，本文聊聊柵格系統(tǒng)在項(xiàng)目中的靈活運(yùn)用。
前言
css柵格通常捆綁在各種框架中，但有時(shí)你需要自己去定制一個(gè)css柵格來滿足實(shí)際的業(yè)務(wù)需要，本文聊聊css柵格系統(tǒng)在項(xiàng)目中的靈活運(yùn)用。
需求UI設(shè)計(jì)了如下布局，其中左上角橙色部分是固定的，藍(lán)色部分是動(dòng)態(tài)渲染的，從前往后依次展示，有一個(gè)就顯示一塊，有二個(gè)就顯示二塊，依次類推。如果數(shù)據(jù)多于6個(gè)，那么多余的數(shù)據(jù)，依次再在下方四列的地方進(jìn)行展示。
從圖中可以看到，柵格分兩種，一種是3列的柵格，一種是4列的柵格。當(dāng)后端接口返回?cái)?shù)據(jù)后，js需要進(jìn)行判斷：當(dāng)數(shù)據(jù)大于6個(gè)時(shí)，前6個(gè)放在數(shù)組A中，數(shù)組A中的數(shù)據(jù)展示在3列的柵格中，多余部分放在數(shù)組B中，數(shù)組B中的數(shù)據(jù)展示在4列的柵格中。
html部分css部分{{item.name}}{{item.name}}
.grid-container {
width: 100%;
}
.grid-container *{
box-sizing: border-box;
}
.grid-container .row:before,
.grid-container .row:after {
content: "";
display: table;
clear: both;
}
.grid-container [class*="col-"] {
float: left;
min-height: 1px;
/*-- gutter --*/
padding: 0 0 20px 20px;
}
.grid-container .col-3{
width: 33.33%;
height: 120px;
}
.grid-container .groups-cell {
background-color: #66d3ff;
height: 100px;
}
.grid-container .col-4 {
width: 25%;
height: 120px;
}
.grid-container .col-4:nth-child(4n+1) {
padding: 0 0px 20px 0px;
}
注意：在4列的柵格中，每行的第一個(gè)單元格不需要padding-left，所以，最后，還得設(shè)置.col-4:nth-child(4n+1)的值。
js部分小結(jié)
本文并沒有對(duì)css柵格的原理進(jìn)行說明，而是針對(duì)具體業(yè)務(wù)問題，說明如何用css柵格系統(tǒng)來提供解決問題的一種方案，對(duì)于柵格系統(tǒng)原理，請(qǐng)見參考部分，這個(gè)老外寫得非常詳細(xì)。
參考Creating Your Own CSS Grid System
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113519.html
摘要：優(yōu)點(diǎn)相比之前布局更具有靈活性缺點(diǎn)脫離文檔流，下面的元素都受影響。 面試題目 假設(shè)高度已知，請(qǐng)寫出三欄布局，左右300px，中間自適應(yīng) showImg(https://segmentfault.com/img/bVbj39Y?w=1152&h=648);有幾種方法呢？ 最容易的應(yīng)該想到利用float來寫，代碼如下 css樣式代碼，以下五種都是用一個(gè)樣式代碼 ...
摘要：先來看一張系統(tǒng)前后端架構(gòu)模型圖。一種接口的約定本文用于定義一種統(tǒng)一的接口設(shè)計(jì)方案，希望具有參考價(jià)值。，和都是常見的軟件架構(gòu)設(shè)計(jì)模式，它通過分離關(guān)注點(diǎn)來改進(jìn)代碼的組織方式。 如何無痛降低 if else 面條代碼復(fù)雜度 相信不少同學(xué)在維護(hù)老項(xiàng)目時(shí)，都遇到過在深深的 if else 之間糾纏的業(yè)務(wù)邏輯。面對(duì)這樣的一團(tuán)亂麻，簡(jiǎn)單粗暴地繼續(xù)增量修改常常只會(huì)讓復(fù)雜度越來越高，可讀性越來越差，有沒...
閱讀 1095·2021-11-16 11:44
閱讀 1376·2019-08-30 13:12
閱讀 2417·2019-08-29 16:05
閱讀 3082·2019-08-28 18:29
閱讀 916·2019-08-26 13:41
閱讀 3238·2019-08-26 13:34
閱讀 2607·2019-08-26 10:35
閱讀 941·2019-08-26 10:28
