CSS - 项目常用的通用样式汇总3（网格布局框架：grd.css）

2019-09-11 发布：hangge 阅读：344

三、网格布局框架

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）显示效果如下：