1. flex 布局: flex 布局是相对轴线布局，即 flex-direction: column/row 来定义元素在容器里面的排布方向
2. grid 布局: grid 布局是通过定义容器里面的行数跟列数来实现网格布局
1. 通过 display: grid / inline-grid 来定义一个网格容器
2. 通过 grid-template-rows / grid-template-columns 来设置行数/列数
3. 通过 grid-template-areas 来设置网格区域
4. 通过 gap 来定义行间距跟列间距，是 row-gap 跟 column-gap 合并简写，类似于 padding
5. 通过 grid-auto-flow 来决定是先行后列还是先列后行，默认是 row，如果是column 则先按列排序，类似 flex 布局的 flex-direction
1 .grid { 2 display: grid; 3 // 可使用值: 具体像素，百分比，fr片段, auto, minmax(min, max) 4 grid-template-rows: 100px 100px 100px; 5 grid-template-rows: 100px 50px 100px; 6 /* 7 声明网格区域，对应的需要在网格元素里面定义 grid-area (也可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式) 8 如果需要创建空白元素，使用小数点. 9 可联合媒体查询实现响应式布局 10 @media screen and (max-width: 640px) { 11 .container { 12 grid-template-areas: 13 "m m m m m m h h h h h h" 14 "c c c c c c c c c c c c" 15 "f f f f f f f f f f f f"; 16 } 17 } 18 */ 19 grid-template-areas: 20 "h h h h h h h h h h h h" 21 "m m c c c c c c c c c c" 22 "f f f f f f f f f f f f"; 23 }
1. 通过 grid-column 指定元素所占的列。是 grid-column-start 跟 grid-column-end 的合并简写模式: grid-column: 1/13 === grid-column-start: 1; grid-column-end: 13 即该元素从第一列网格线占到第13列网格线，也就是占据12列网格
2. 通过 grid-row 指定元素所占的行。是 grid-row-start 跟 grid-row-end 的合并简写模式，效果同 grid-column
3. 通过 grid-area 指定匹配grid容器对应的区域，也可以是grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式
最后贴上简单版的html
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .wrapper { display: grid; /*grid-template-columns: 100px 100px 100px;*/ /*grid-template-columns: 30% 35% 35%;*/ /*grid-template-columns: repeat(2, 1fr, [col1-start]) 1.5fr;*/ grid-template-columns: 1fr repeat(2, 2fr); grid-template-rows: 50px 50px 50px; } .item1 { /*grid-column是按网格线计算，不是按网格，即3个网格应该有4条网格线*/ /*grid-column-start: 1; grid-column-end: 3;*/ grid-column: 1/3; } .item3 { grid-row-start: 2; grid-row-end: 4; } .item4 { grid-column-start: 2; grid-column-end: 4; } .container { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 50px 350px 50px; gap: 5px; text-align: center; /* 声明网格区域，对应的需要在网格元素里面定义 grid-area 如果需要创建空白元素，使用小数点. */ grid-template-areas: "h h h h h h h h h h h h" "m m c c c c c c c c c c" "f f f f f f f f f f f f"; } @media screen and (max-width: 640px) { .container { grid-template-areas: "m m m m m m h h h h h h" "c c c c c c c c c c c c" "f f f f f f f f f f f f"; } } .header { background-color: #bbf1bb; /* 指定该元素从第一列网格线占到第13列网格线，也就是占据12列网格 指定该元素从第一行网格线占到第2行网格线，也就是占据1行网格 */ /*grid-column: 1/13; grid-row: 1/2;*/ /* 也可以通过grid容器里面定义 grid-template-areas 网格区域， 然后对应的元素声明所属网格 */ /*grid-area: h;*/ grid-area: 1/1/2/13; } .menu { background-color: #fde886; /*grid-column: 1/3; grid-row: 2/3;*/ /*grid-area: m;*/ grid-area: 2/1/3/3; } .content { background-color: #8afcf9; /*grid-column: 3/13; grid-row: 2/3;*/ /*grid-area: c;*/ grid-area: 2/3/3/13; } .footer { background-color: #dfb8f8; /*grid-column: 1/13; grid-row: 3/4;*/ /*grid-area: f;*/ grid-area: 3/1/4/13; } </style> </head> <body> <!-- <div class="wrapper"> <div class="item1" style="background-color: #cde1d5; text-align: center;">1</div> <div style="background-color: #457d84; text-align: center;">2</div> <div class="item3" style="background-color: #9d829a; text-align: center;">3</div> <div class="item4" style="background-color: #8b8d8b; text-align: center;">4</div> <div style="background-color: #6c7c5d; text-align: center;">5</div> <div style="background-color: #95997c; text-align: center;">6</div> </div> --> <div class="container"> <div class="header">HEADER</div> <div class="menu">MENU</div> <div class="content">CONTENT</div> <div class="footer">FOOTER</div> </div> </body> </html>
原文：https://www.cnblogs.com/l-c-blog/p/13382068.html
