CSS - 项目常用的通用样式汇总3(网格布局框架:grd.css)
三、网格布局框架
1,grd.css 介绍
(1)Grd 是一款基于 Flexbox 的 CSS 网格系统框架。通过这个 CSS 网格框架,我们可以在页面中进行各种形式的网格布局。它默认采用和 Bootstrap 相同的 12 列布局。
(2)Grd 是轻量级框架,代码如下:
注意:我这里对其原始代码进行了改进,在原有的横向布局基础上,增加了纵向布局(column)的样式。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | .Grid { display : flex; flex-wrap: wrap; } .Grid.\-column { flex- direction : column; } .Grid.\- top { align-items: flex-start; } .Grid.\- middle { align-items: center ; } .Grid.\- bottom { align-items: flex-end; } .Grid.\-stretch { align-items: stretch; } .Grid.\- baseline { align-items: baseline ; } .Grid.\- left { justify- content : flex-start; } .Grid.\- center { justify- content : center ; } .Grid.\- right { justify- content : flex-end; } .Grid.\-between { justify- content : space-between; } .Grid.\-around { justify- content : space-around; } .Grid.\-align-content-start { align- content : start; } .Cell { box-sizing: border-box; flex-shrink: 0 ; } .Grid:not(.\-column)>.Cell.\-fill { width : 0 ; min-width : 0 ; flex-grow: 1 ; } .Grid:not(.\-column)>.Cell.\ -1 of 12 { width : calc( 100% * 1 / 12 ); } .Grid:not(.\-column)>.Cell.\ -2 of 12 { width : calc( 100% * 2 / 12 ); } .Grid:not(.\-column)>.Cell.\ -3 of 12 { width : calc( 100% * 3 / 12 ); } .Grid:not(.\-column)>.Cell.\ -4 of 12 { width : calc( 100% * 4 / 12 ); } .Grid:not(.\-column)>.Cell.\ -5 of 12 { width : calc( 100% * 5 / 12 ); } .Grid:not(.\-column)>.Cell.\ -6 of 12 { width : calc( 100% * 6 / 12 ); } .Grid:not(.\-column)>.Cell.\ -7 of 12 { width : calc( 100% * 7 / 12 ); } .Grid:not(.\-column)>.Cell.\ -8 of 12 { width : calc( 100% * 8 / 12 ); } .Grid:not(.\-column)>.Cell.\ -9 of 12 { width : calc( 100% * 9 / 12 ); } .Grid:not(.\-column)>.Cell.\ -10 of 12 { width : calc( 100% * 10 / 12 ); } .Grid:not(.\-column)>.Cell.\ -11 of 12 { width : calc( 100% * 11 / 12 ); } .Grid:not(.\-column)>.Cell.\ -12 of 12 { width : 100% ; } .Grid.\-column>.Cell.\-fill { height : 0 ; min-height : 0 ; flex-grow: 1 ; } .Grid.\-column>.Cell.\ -1 of 12 { height : calc( 100% * 1 / 12 ); } .Grid.\-column>.Cell.\ -2 of 12 { height : calc( 100% * 2 / 12 ); } .Grid.\-column>.Cell.\ -3 of 12 { height : calc( 100% * 3 / 12 ); } .Grid.\-column>.Cell.\ -4 of 12 { height : calc( 100% * 4 / 12 ); } .Grid.\-column>.Cell.\ -5 of 12 { height : calc( 100% * 5 / 12 ); } .Grid.\-column>.Cell.\ -6 of 12 { height : calc( 100% * 6 / 12 ); } .Grid.\-column>.Cell.\ -7 of 12 { height : calc( 100% * 7 / 12 ); } .Grid.\-column>.Cell.\ -8 of 12 { height : calc( 100% * 8 / 12 ); } .Grid.\-column>.Cell.\ -9 of 12 { height : calc( 100% * 9 / 12 ); } .Grid.\-column>.Cell.\ -10 of 12 { height : calc( 100% * 10 / 12 ); } .Grid.\-column>.Cell.\ -11 of 12 { height : calc( 100% * 11 / 12 ); } .Grid.\-column>.Cell.\ -12 of 12 { height : 100% ; } |
2,使用样例
(1)下面使用 grd.css 来绘制一个简单的页面:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >Title</ title > < link rel = "stylesheet" href = "normalize.css" type = "text/css" > < link rel = "stylesheet" href = "grd.css" type = "text/css" > < style > span { width: 50px; height: 50px; margin: 10px 0 0 10px; background-color: #60BDFF; color: #FFFFFF; font-size: 20px; font-weight:bold; } </ style > </ head > < body > < div class = "Grid" style = "height: 300px;" > < div class = "Cell -3of12" style = "background: lightseagreen" >3/12</ div > < div class = "Cell -9of12 Grid -column" > < div class = "Cell" style = "height: 100px;background: darksalmon;" >9/12</ div > < div class = "Cell -fill Grid -align-content-start" style = "background: lavender" > < span class = "Cell" >1</ span > < span class = "Cell" >2</ span > < span class = "Cell" >3</ span > < span class = "Cell" >4</ span > < span class = "Cell" >5</ span > < span class = "Cell" >6</ span > < span class = "Cell" >7</ span > < span class = "Cell" >8</ span > </ div > </ div > </ div > </ body > </ html > |
(2)显示效果如下:
