css栅格体系在项目中的灵活运用

媒介

css栅格一般捆绑在种种框架中，但偶然你须要本身去定制一个css栅格来满足现实的营业须要，本文聊聊css栅格体系在项目中的灵活运用。

需求

UI设想了以下规划，个中左上角橙色部份是牢固的，蓝色部份是动态衬着的，夙昔今后顺次展现，有一个就显现一块，有二个就显现二块，顺次类推。假如数据多于6个，那末过剩的数据，顺次再在下方四列的处所举行展现。

剖析

从图中能够看到，栅格分两种，一种是3列的栅格，一种是4列的栅格。当后端接口返回数据后，js须要举行推断：当数据大于6个时，前6个放在数组A中，数组A中的数据展现在3列的栅格中，过剩部份放在数组B中，数组B中的数据展现在4列的栅格中。

html部份

css部份

.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列的栅格中，每行的第一个单元格不须要padding-left，所以，末了，还得设置.col-4:nth-child(4n+1)的值。

js部份

小结

本文并没有对css栅格的道理举行申明，而是针对细致营业题目，申明如何用css栅格体系来供应解决题目的一种计划，关于栅格体系道理，请见参考部份，这个老外写得异常细致。

参考

Creating Your Own CSS Grid System