Grid 布局，就是网格布局。
简单的需求，垂直居中、水平居中等，有 Flex 布局。
网格布局，对应网页设计或者说是平面设计中的网格系统（Grid System）
设置一个经典的网页布局
/* html 代码 */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grid layout</title>
</head>
<body>
<div class="container">
<header>Header</header>
<main>Main</main>
<aside>Aside</aside>
<footer>Footer</footer>
</div>
</body>
</html>
上面代码中基本上是只是将页面几个大的元素列出来，理论上在没有布局之前它们们是每个各占一行的普通的div盒子。但是结合网页设计中的设计，将 header 放到导航，footer放到页脚，中间是主要内容和边栏工具。
CSS 代码
.container {
border: 1px solid red;
height: 80vh;
display: grid;
grid-template-columns: 20% auto 20%;
grid-template-rows: 50px auto 50px;
grid-template-areas:
'header header header'
'. main aside'
'footer footer footer';
}
上面代码中，将容器元素设置为网格布局，并分三列(grid-template-columns)，宽度分别是 20%,auto,20%；分三行(grid-template-rows)，高度分别是50px, auto，50px,再分别设置每个元素的对应区域，就完成了一个经典的网页布局。
.container header {
grid-area: header;
background-color: red;
}
.container main {
grid-area: main;
background-color: blue;
}
.container aside {
grid-area: aside;
background-color: yellow;
}
.container footer {
grid-area: footer;
background-color: red;
}
分别将header,main,aside,footer,设置为对应的网格区域，就形成了一个经典的网页布局。
gridLayout.JPG
grid-template 的组合写法
其实grid布局还可以使用类似font和background的组合写法
<!DOCTYPE css>
.container {
grid-template:
[row1-start] "header header header" 25px [row-end]
[row2-start] "footer footer footer" 25px [row-end]
/ auto 50px auto;
}
上面的写法似乎比分开描述行列的写法更容易理解，和实际的图像更有对应性，代码从字面义上表示第一行的开始，第一行的结束，第一行中分别有哪些元素，以及行宽是多少，第二行同理；行的信息描述完之后，描述三个列的大小信息，分别是auto,50px,auto的大小。
因此上面的经典网页布局中，可以写成：
.container {
grid-template:
'header header header' 20%
'. main aside' auto
'footer footer footer' 20%
/ 50px auto 50px ;
}
上面代码分别对应三行布局进行了 CSS 设置，更具有可读性，也更好和画面对应，设置完行之后设置列的信息。
还可以使用grid-column-gap或者grid-row-gap设置行列间的间距
.container {
grid-column-gap: 10px;
grid-row-gap: 10px;
}
grid-gap
// grid 布局真tm复杂，流行不起来是有原因的。
Grid 布局练习知乎布局
主要用来练习 Grid 布局，切换 tab 可以用，搜索可以用。搜索所得内容版权等一切归原网站所有。
网友评论