CSS grid布局

CSS grid布局

开启grid布局

display:grid

规范行数及高度

grid-template-rows:6rem 1fr 6rem;

• 三个参数即三行
• 1fr即被分配完剩余的空间（比如，容器为100vh，上下的高度为6rem，中间行的高度为100vh-12rem

规范列数及宽度

grid-template-columns: 20rem 1fr 20rem

grid-template-columns与grid-template-rows的概念相同

命名

grid-area用来给grid子元素命名

grid-area:header

grid-area:main

grid-area:nav

grid-area:aside

grid-area:footer

布局

grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";

结合以上所有代码，我们将容器分为了三行三列（长度不相等）的表格

grid-template-areas则是以一个单元格为单位进行布局

比如，第一行3个header，即header代表的grid子元素占据容器的一整行

间距

行间距

row-gap:10px

列间距

column-gap: