Grid布局 是CSS中最强大的布局系统，其属性繁杂，还有各种简写，但是举个例子很容易理解并上手grid布局。
html结构如下
<div class="container">
<div class="header">header</div>
<div class="main">main</div>
<div class="aside">aside</div>
<div class="footer">footer</div>
</div>
用三种写法实现如下布局
grid-layout
写法1
.container {
border: 1px solid #000;
height:50vh;
display: grid;
grid-template-columns: 10% auto 10%;
grid-template-rows: 50px auto 50px;
grid-template-areas:
"header header header"
". main aside"
"footer footer footer"
}
.header {
grid-area: header;
background-color: pink;
}
.main {
grid-area: main;
background-color: blue;
}
.aside{
grid-area: aside;
background-color: yellow;
}
.footer{
grid-area: footer;
background-color: red;
}
这是种比较容易理解但是写起来不够方便的写法。
-
grid-template-columns和grid-template-rows分别定义了网格纵向和横向的长度 -
grid-template-areas给每个子项定义了用处 - 子项中绑定
grid-area
写法2-简写为grid-template
.container {
border: 1px solid #000;
height:50vh;
display: grid;
grid-template:
"header header header" 50px
". main aside" auto
"footer footer footer" 50px
/ 10% auto 10%
}
.header {
grid-area: header;
background-color: pink;
}
.main {
grid-area: main;
background-color: blue;
}
.aside{
grid-area: aside;
background-color: yellow;
}
.footer{
grid-area: footer;
background-color: red;
}
这个写法仅仅是将grid-template-columns、grid-template-rows、和 grid-template-areas三个属性简写为grid-template，子项仍旧需要绑定grid-area。
写法3-根据网格线写
.container {
border: 1px solid #000;
height:50vh;
display: grid;
grid: 50px auto 50px / 10% auto 10%;
}
.header {
background-color: pink;
grid-column: 1 / 4; // 也可写成 1 / span 3
grid-row: 1;
}
.main {
background-color: blue;
grid-column: 2;
grid-row: 2;
}
.aside{
background-color: yellow;
grid-column: 3;
grid-row: 2;
}
.footer{
background-color: red;
grid-column: 1 / 4;
grid-row: 3;
}
这个写法比较简单，但并不容易理解。
-
grid: 50px auto 50px / 10% auto 10%;定义了row和column长度 - 子项中
grid-column和grid-row后面的的数字指的是第几根网格线，类似于坐标。grid-column: 1 / 4指的是占用第一根竖线到最后一根竖线间所有，也可写成grid-column: 1 / span 3，指的是从第一根竖线起横跨3格。
总结
这三种写法只是grid布局入门，grid布局中还涉及到很多属性，需要看文档或者教程进一步理解记忆和运用。而grid布局中的子项的一些属性（比如居中等）和flex中的类似，学好flex布局也能很好上手grid布局。
