CSS - 项目常用的通用样式汇总3(网格布局框架:grd.css)
作者:hangge | 2019-09-11 08:10
三、网格布局框架
1,grd.css 介绍
(1)Grd 是一款基于 Flexbox 的 CSS 网格系统框架。通过这个 CSS 网格框架,我们可以在页面中进行各种形式的网格布局。它默认采用和 Bootstrap 相同的 12 列布局。
(2)Grd 是轻量级框架,代码如下:
注意:我这里对其原始代码进行了改进,在原有的横向布局基础上,增加了纵向布局(column)的样式。
.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.\-1of12 { width: calc(100% * 1 / 12); } .Grid:not(.\-column)>.Cell.\-2of12 { width: calc(100% * 2 / 12); } .Grid:not(.\-column)>.Cell.\-3of12 { width: calc(100% * 3 / 12); } .Grid:not(.\-column)>.Cell.\-4of12 { width: calc(100% * 4 / 12); } .Grid:not(.\-column)>.Cell.\-5of12 { width: calc(100% * 5 / 12); } .Grid:not(.\-column)>.Cell.\-6of12 { width: calc(100% * 6 / 12); } .Grid:not(.\-column)>.Cell.\-7of12 { width: calc(100% * 7 / 12); } .Grid:not(.\-column)>.Cell.\-8of12 { width: calc(100% * 8 / 12); } .Grid:not(.\-column)>.Cell.\-9of12 { width: calc(100% * 9 / 12); } .Grid:not(.\-column)>.Cell.\-10of12 { width: calc(100% * 10 / 12); } .Grid:not(.\-column)>.Cell.\-11of12 { width: calc(100% * 11 / 12); } .Grid:not(.\-column)>.Cell.\-12of12 { width: 100%; } .Grid.\-column>.Cell.\-fill { height: 0; min-height: 0; flex-grow: 1; } .Grid.\-column>.Cell.\-1of12 { height: calc(100% * 1 / 12); } .Grid.\-column>.Cell.\-2of12 { height: calc(100% * 2 / 12); } .Grid.\-column>.Cell.\-3of12 { height: calc(100% * 3 / 12); } .Grid.\-column>.Cell.\-4of12 { height: calc(100% * 4 / 12); } .Grid.\-column>.Cell.\-5of12 { height: calc(100% * 5 / 12); } .Grid.\-column>.Cell.\-6of12 { height: calc(100% * 6 / 12); } .Grid.\-column>.Cell.\-7of12 { height: calc(100% * 7 / 12); } .Grid.\-column>.Cell.\-8of12 { height: calc(100% * 8 / 12); } .Grid.\-column>.Cell.\-9of12 { height: calc(100% * 9 / 12); } .Grid.\-column>.Cell.\-10of12 { height: calc(100% * 10 / 12); } .Grid.\-column>.Cell.\-11of12 { height: calc(100% * 11 / 12); } .Grid.\-column>.Cell.\-12of12 { height: 100%; }
2,使用样例
(1)下面使用 grd.css 来绘制一个简单的页面:
<!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)显示效果如下:
全部评论(0)