grid布局指南

注：前方高能，文章略长，希望你可以耐心阅读下去

属性列表
display:grid | inline-grid | subgrid
grid-template-columns:<track-size> ... | <line-name> <track-size> ...;
grid-template-rows:<track-size> ... | <line-name> <track-size> ...;
grid-template-areas: "<grid-area-name> | . | none | ..." "..."
grid-column-gap:<line-size>
grid-row-gap: <line-size>
grid-gap: <grid-column-gap> <grid-row-gap>
justify-items: start | end | center | stretch;网格子项的内容和列轴对齐，对所有的网格子项都有用
align-items: start | end | center | stretch;网格子项的内容和行轴轴对齐，对所有的网格子项都有用
justify-self: start | end | center | stretch
align-self: start | end | center | stretch
justify-content: start | end | center | stretch | space-around | space-between | space-evenly ;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
grid-auto-columns: <track-size>
grid-auto-rows: <track-size>
grid-auto-flow: row | column | row dense | column dense
grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ];
grid-column-start: <number> | <name> | span <number> | span <name> | auto ;
grid-column-end: <number> | <name> | span <number> | span <name> | auto ;
grid-row-start: <number> | <name> | span <number> | span <name> | auto ;
grid-row-end: <number> | <name> | span <number> | span <name> | auto ;
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;

1.display:grid | inline-grid | subgrid

grid 块级的网格容器
inline-grid 内联的网格容器
subgrid 继承父级网格容器的行和列的大小的网格容器

2.grid-template-columns:<track-size> ... | <line-name> <track-size> ...;

3.grid-template-rows:<track-size> ... | <line-name> <track-size> ...;

<track-size> 必填，定义网格单元的宽高
单位可以为长度(px/em/rem/vw/vh)、百分比、网格中自由空间的份数(fr)
<line-name> 可选，网格线名称
可选择任意名字，若未显示设定时，以数字表示

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>grid布局</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .container {
            width: 500px;
            height: 500px;
            display: grid;
            grid-template-columns: 33% 33% 33%;    /* 定义容器重复部分，也可以写为grid-template-columns:repeat(3,33%)*/
            grid-template-rows: 33% 33% 33%;       /* 按容器份数设置，grid-template-rows:repeat(3,1fr)*/
        }
        .container div {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

效果图.png

4.grid-template-areas: "<grid-area-name> | . | none | ..." "..."

<grid-area-name> 在grid-area中指定的网格区域名字
. 表示一个空的网格单元
none 没有网格区域被定义

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>grid布局</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .item-a{
            grid-area:header;
            background: black;
        }
        .item-b{
            grid-area:main;
            background: blue;
        }
        .item-c{
            grid-area:sidebar;
            background: chartreuse;
        }
        .item-d{
            grid-area:footer;
            background: red;
        }
        .container {
            width: 500px;
            height: 200px;
            display: grid;
            grid-template-columns: repeat(4,1fr);
            grid-template-rows: repeat(3,1fr);
            grid-template-areas: "header header . footer""main main . sidebar""main main . sidebar"
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item-a"></div>
        <div class="item-b"></div>
        <div class="item-c"></div>
        <div class="item-d"></div>
    </div>
</body>
</html>

效果图.png

5.grid-column-gap:<line-size>

6.grid-row-gap: <line-size>

7.grid-gap: <grid-column-gap> <grid-row-gap>

grid-column-gap、grid-row-gap 指定网格线的大小即网格子项之间的间距
grid-gap 是grid-column-gap和grid-row-gap的简写，若只有一个值，则两者值一样
<line-size> 长度值

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Page Title</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style type="text/css">
       .container {
           width: 200px;
           height: 200px;
           display: grid;
           grid-template-columns: repeat(3,30%);
           grid-template-rows: repeat(3,30%);
           grid-column-gap: 2%;
           grid-row-gap: 2%;
       }
       .container div {
           border: 1px solid #000;
       }
   </style>
</head>
<body>
   <div class="container">
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
       <div></div>
   </div>
</body>
</html>

效果图.png

8.justify-items: start | end | center | stretch;

网格子项的内容和列轴对齐，对所有的网格子项都有用
start 内容和网格区域的左边对齐
end 内容和网格区域的右边对齐
center 内容和网格区域的中间对齐
stretch 填充整个网格区域的宽度（默认值）

9.align-items: start | end | center | stretch;

网格子项的内容和行轴轴对齐，对所有的网格子项都有用
start 内容和网格区域的顶部对齐
end 内容和网格区域的底部对齐

center 内容和网格区域的中间对齐
stretch 填充整个网格区域的高度（默认值）

justify-items.png

align-items.png

10.justify-self: start | end | center | stretch

网格子项的内容以列轴对齐，应用在单个网格子项的内容

start 让内容在网格区域左对齐
end 让内容在网格区域右对齐
center 让内容在网格区域中间对齐
stretch 填充着整个网络区域的宽度（默认值）

11.align-self: start | end | center | stretch

网格子项的内容以行轴对齐，应用在单个网格子项的内容
start 让内容在网格区域上对齐
end 让内容在网格区域下对齐
center 让内容在网格区域中间对齐
stretch 填充着整个网络区域的宽度（默认值）

justify-self.png

align-self.png

12.justify-content: start | end | center | stretch | space-around | space-between | space-evenly ;

如果用像px非弹性单位定义的话，总网格区域大小有可能小于网格容器，这时候你可以设置网格的对齐方式（垂直于列网格线对齐）
start 左对齐
end 右对齐
center 居中对齐
stretch 填充网格容器
space-around 在每个网格子项中间放置均等的空间，在始末两端只有一半大小
space-between 两边对齐，在每个网格子项中间放置均等的空间，在始末两端没有空间
space-evenly 网格间隔相等，包括始末两端

13.align-content: start | end | center | stretch | space-around | space-between | space-evenly;

如果用像px非弹性单位定义的话，总网格区域大小有可能小于网格容器，这时候你可以设置网格的对齐方式（垂直于行网格线对齐）
start 顶部对齐
end 底部对齐
center 居中对齐
stretch 填充网格容器
space-around 在每个网格子项中间放置均等的空间，在始末两端只有一半大小
space-between 上下对齐，在每个网格子项中间放置均等的空间，在始末两端没有空间
space-evenly 在每个网格子项中间放置均等的空间，包括始末两端

justify-content.png

align-content.png

14.grid-auto-columns: <track-size>

15.grid-auto-rows: <track-size>

自动生成隐式网格轨道（列和行），当你定位网格项超出网格容器范围时，将自动创建隐式网格轨道
<track-size> 可以是一个长度(px/em/rem/vw/vh)、百分比、网格中自由空间的份数（fr）

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>Page Title</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <style type="text/css">
       .container {
           display: grid;
           grid-template-columns: repeat(2,60px);
           grid-template-rows: repeat(2,90px);
           grid-auto-columns: 60px;    /* grid-auto-columns指定隐式网格轨迹的宽度 */
       }
       .item1 {
           background: red;
           grid-column: 1/2;       /* grid-column和grid-row用于定位你的网格子项 */
           grid-row: 2/3
       }
       .item2{
           background: green;
           grid-column: 5/6;
           grid-row: 2/3;
       }
   </style>
</head>
<body>
   <div class="container">
       <div class="item1"></div>
       <div class="item2"></div>
   </div>
</body>
</html>

实现过程.png

16.grid-auto-flow: row | column | row dense | column dense

未设置网格项的位置时，这个属性用于控制网格项怎样排列
row 按照行依次从左到右排列
column 按照列依次从上到下排列
dense 按先后顺序排列

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        .container {
            display: grid;
            grid-template-columns: repeat(5, 100px);
            grid-template-rows: repeat(2, 100px);
            grid-auto-flow: row;
            color: #fff;
        }

        .item3 {
            grid-column: 1;
            grid-row: 1 / 3;
            background: red;
        }

        .item7 {
            grid-column: 5;
            grid-row: 1 / 3;
            background: bisque;
        }

        .item5 {
            background: black;
        }

        .item6 {
            background: blueviolet;
        }

        .item4 {
            background: blue;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>
        <div class="item7">7</div>
    </div>
</body>

</html>

效果图.png

grid-auto-flow设为column

效果图.png

17.grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ];

grid是一种简写形式

18.grid-column-start: <number> | <name> | span <number> | span <name> | auto ;

19.grid-column-end: <number> | <name> | span <number> | span <name> | auto ;

20.grid-row-start: <number> | <name> | span <number> | span <name> | auto ;

21.grid-row-end: <number> | <name> | span <number> | span <name> | auto ;

用于定义网格项的位置
<number> | <name> 可以是一个数字以适用被标记了数字号的网格线，或者是一个名字以适用命名了的网格线
span <number> 子项将跨越指定数字的网格轨迹
span <name> 子项将跨越指定名字之前的网格线
auto> 自动布局，自动跨越或者默认跨越一个。

.item-a{     
    grid-column-start: 2;     
    grid-column-end: five;     
    grid-row-start: row1-start     
    grid-row-end: 3  
}

item-a.png

.item-b{     
   grid-column-start: 1;     
   grid-column-end: span col4-start;     
   grid-row-start: 2     
   grid-row-end: span 2  
}

item-b.png

.item-c{     
   grid-column: 3 / span 2;     
   grid-row: third-line / 4;  
}

item-c.png

22.grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;

<name>：选择的名字

<row-start> / <column-start> / <row-end> / <column-end> 可以是网格线的数字或名字

.item-d{     
    grid-area: 1 / col4-start / last-line / 6  
}

item-d.png

妈呀，终于看完并梳理一遍了，这内容忒多了些吧
文章借鉴于https://www.imooc.com/article/43143
希望也能帮助到你

最后编辑于：2019.02.27 14:16:22

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,294评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,493评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,790评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,595评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,718评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,906评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,053评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,797评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,250评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,570评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,711评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,388评论 4赞 332
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,018评论 3赞 316
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,796评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,023评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,461评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,595评论 2赞 350

grid布局指南

1.display:grid | inline-grid | subgrid

2.grid-template-columns:<track-size> ... | <line-name> <track-size> ...;

3.grid-template-rows:<track-size> ... | <line-name> <track-size> ...;

4.grid-template-areas: "<grid-area-name> | . | none | ..." "..."

5.grid-column-gap:<line-size>

6.grid-row-gap: <line-size>

7.grid-gap: <grid-column-gap> <grid-row-gap>

8.justify-items: start | end | center | stretch;

9.align-items: start | end | center | stretch;

10.justify-self: start | end | center | stretch

11.align-self: start | end | center | stretch

12.justify-content: start | end | center | stretch | space-around | space-between | space-evenly ;

13.align-content: start | end | center | stretch | space-around | space-between | space-evenly;

14.grid-auto-columns: <track-size>

15.grid-auto-rows: <track-size>

16.grid-auto-flow: row | column | row dense | column dense

17.grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [ / <grid-auto-columns>] ];

18.grid-column-start: <number> | <name> | span <number> | span <name> | auto ;

19.grid-column-end: <number> | <name> | span <number> | span <name> | auto ;

20.grid-row-start: <number> | <name> | span <number> | span <name> | auto ;

21.grid-row-end: <number> | <name> | span <number> | span <name> | auto ;

22.grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;

推荐阅读更多精彩内容