CSS Grid Layout Module

最新推荐文章于 2023-08-07 18:28:55 发布

Lalala这是我的小马甲哦

最新推荐文章于 2023-08-07 18:28:55 发布

阅读量587

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/realDE/article/details/54608067

版权

学习笔记专栏收录该内容

37 篇文章 0 订阅

订阅专栏

CSS Grid Layout Module

什么是Grid

定义：根据元素按列或行对齐排列，但是和table不同的是，格网里面的内容可以定位自己的位置
flexbox是一维布局，他只能在一条直线上放置你的内容区块；而grid是一个二维布局。我没有仔细了解过flexbox，所以这个是参考网上的文章记录的。以后学习了，在写自己的想法吧。
组成
- 网格线 Grid Lines
- 网格轨道 Grid Track 在网格中分为grid column和grid row
- 网格单元 Grid Cell
- 网格区域 Grid Area
- 网格单元格顺序 order
由于网格容器不是块容器，所以有部分属性在网格布局中将会失效：

多列布局模块中的所有column-*属性运用在网格容器上将失效
float和clear使用在网格项目（网格单元格Grid Cell）上将失效
vertical-align使用在网格单元格上将失效
::first-line和::first-letter这样的伪元素不能应用在网格容器上

开启浏览器Grid

除了IE10+默认支持CSS Grid Layout模块功能之外，其他的浏览器Chrome、Safari、Opera和Firefox都需要重新设置（启用开发中的实验性网络平台功能）
http://www.w3cplus.com/css3/how-to-enable-support-for-grid-layout-in-various-browsers.html 这里有说如何开启

网格单元布局

定义一个网格

HTML 简单点说就是一个三行三列的网格，并且列(宽为100px)与列之间，行(高度为auto)与行之间的间距都是10px。

    <div class="wrapper">
        <div class="box a">A</div>
        <div class="box b">B</div>
        <div class="box c">C</div>
        <div class="box d">D</div>
        <div class="box e">E</div>
        <div class="box f">F</div>
        <div class="box g">G</div>
        <div class="box h">H</div>
        <div class="box i">I</div>
        <div class="box j">J</div>
    </div>

CSS

    body {
        padding: 50px;
    }
    .wrapper {
        display: grid;
        grid-template-columns: 100px 10px 100px 10px 100px;
        grid-template-rows: auto 10px auto;
    }
    .box {
        background-color: #444;
        color: #fff;
        font-size: 150%;
        padding: 20px;
    }
    .b,.d,.g,.i {
        background-color:red;
    }

对应的子元素.a、.c、.e、.f、.h和.j列宽度为100px(也就是黑色区域),而.b、.d、.g和.i是列与列的间距10px(也就是红色区域)。而且当子元素在一行填不下时，就会自动换行，如.f～.j自动换到第二行显示。

基于网格线的占位区

CSS

    body{
        padding:50px;
    }
    .wrapper{
        display:grid;
        grid-template-columns:100px 10px 100px 10px 100px 10px 100px;
        grid-template-rows:auto 10px auto 10px auto;
    }
    .box{
        color:#fff;
        font-size: 150%;
        padding: 20px;
        text-align: center;
    }
    .a{
        grid-column-start:1;
        grid-column-end:2;
        grid-row-start:1;
        grid-row-end:2;
        background-color:red;
    }
    .b{
        grid-column-start:3;
        grid-column-end:4;
        grid-row-start:1;
        grid-row-end:2;
        background-color:yellow
    }
    .c{
        grid-column-start:5;
        grid-column-end:6;
        grid-row-start:1;
        grid-row-end:2;
        background-color:green;
    }
    .d{
        grid-column-start:7;
        grid-column-end:8;
        grid-row-start:1;
        grid-row-end:2;
        background-color:blue;
    }
    .e{
        grid-column-start:1;
        grid-column-end:2;
        grid-row-start:3;
        grid-row-end:4;
        background-color:orange;
    }
    .f{
        grid-column-start:3;
        grid-column-end:4;
        grid-row-start:3;
        grid-row-end:4;
        background-color:pink;
    }
    .g{
        grid-column-start:5;
        grid-column-end:6;
        grid-row-start:3;
        grid-row-end:4;
        background-color:gray;
    }
    .h{
        grid-column-start:7;
        grid-column-end:8;
        grid-row-start:3;
        grid-row-end:4;
        background-color:black;
    }
    .i{
        grid-column-start:1;
        grid-column-end:2;
        grid-row-start:5;
        grid-row-end:6;
        background-color:lightgreen;
    }
    .j{
        grid-column-start:3;
        grid-column-end:4;
        grid-row-start:5;
        grid-row-end:6;
        background-color:purple;
    }

数字表示所占网格的起始以及结束的行线和列线，这样的定位便于交换位置
网格线的简写方式，就是grid-column和grid-row的start与end值合并在一起，两者之间用/来分隔

    .a{
        grid-column: 1 / 2; 
        grid-row: 1 / 2;
    }

网格区域实现元素占位区

组成网格区域的网格线顺序是row-start/column-start/row-end/column-end。每个网格线之间也是使用/来分隔。

 .a{
        grid-area: 1 / 1 / 2 / 2;
    }

合并单元格布局

CSS

    body{
            padding:50px;
        }
        .wrapper{
            display: grid;
            grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;
            grid-template-rows:auto 10px auto 10px auto 10px auto 10px auto;
        }
        .box{
            background-color: #444;
            color:#fff;
            font-size: 150%;
            padding: 20px;
            text-align: center;
        }
        .a{
            grid-column:1/6;
            grid-row:1/2;
            background-color:#564577;
        }
        .b{
            grid-column:7/8;
            grid-row:1/10;
            background-color: #995457;
        }
        .c{
            grid-column:1/2;
            grid-row:3/4;
        }
        .d{
            grid-column:3/4;
            grid-row:3/4;
        }
        .e{
            grid-column:5/6;
            grid-row:3/4;
        }
        .f{
            grid-column:1/4;
            grid-row:5/6;
            background-color: #778821;
        }
        .g{
            grid-column:5/6;
            grid-row:5/6;
        }
        .h{
            grid-column:1/2;
            grid-row:7/8;
        }
        .i{
            grid-column:3/6;
            grid-row:7/8;
            background-color: #434526;
        }
        .j{
            grid-column:1/6;
            grid-row:9/10;
            background-color: #678342;
        }

在资料上写的.b类没有实现跨行，可能是现在的浏览器纠正了吧，不用span也可以实现跨行了。使用span就是1/6 是指3格所以从第一条线开始还需要span 5条线

自定义网格线名称

    .wrapper {
        display: grid;
        grid-template-columns: (col1-start) 100px (col1-end) 10px (col2-start) 100px (col2-end) 10px (col3-start) 100px (col3-end) 10px (col4-start) 100px (col4-end);
        grid-template-rows: (row1-start) auto (row1-end) 10px (row2-start) auto (row2-end) 10px (row3-start) auto (row3-end) 10px (row4-start) auto (row4-end) 10px (row5-start) auto (row5-end);
    }

自定义网格线配合关键词span合并单元格

在实际使用中，可以在网格内容轨道前的网格线都定义为col，而在列间距轨道前的网格线都定义为gutter。在调用时，可以使用col 来指定开始的网格线，配合关键词span 来指写网格的跨度。

    .wrapper {
        display: grid;
        grid-template-columns: (col) 100px (gutter) 10px (col) 100px (gutter) 10px (col) 100px (gutter) 10px (col) 100px (gutter) 10px (col) 100px (gutter) 10px (col) 100px (gutter); 
        grid-template-rows: (row) auto (gutter) 10px (row) auto (gutter) 10px (row) auto (gutter) 10px (row) auto;
    }

    .a{
        grid-column: col / span gutter 2; 
        grid-row: row;
    }
    .b {
        grid-column: col 3 / span gutter 2; 
        grid-row: row;
    }

我自己测试了一下，没有成功，而且我觉得好像更麻烦，所以，我也是不懂咯~~

repeat关键词

    .wrapper {
        display: grid;
        grid-template-columns:repeat(6, (col) 100px (gutter) 10px); 
        grid-template-rows: repeat(4, (row) auto (gutter) 10px );
    }

6个col，和6个gutter；6个row，和6个gutter

网格区域合并单元格

    .b{
        grid-area:1/7/10/8;
        /*grid-column:7/span 1;
        grid-row:1/10;*/
        background-color: #995457;
    }

参考资料上说，合并行无法直接实现，我现在测试以后是可以实现的。(●’◡’●)

虽然大致了解了grid的原理，但是还是不是很清楚怎么去实际运用，比如和媒体查询结合，而且好像浏览器支持也不太好，所以，还需要阅读更多的更深入的文章继续学习。

PS：csdn的markdown编辑器里是好好的，可是展示出来为什么就什么都不好了呢！！！！丑死了

参考资料 *
什么网格
 浏览器开启CSS Grid Layout
网格单元布局
 合并单元格布局

Lalala这是我的小马甲哦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录