https://www.jianshu.com/p/21fc2c091b98
概念:
- Grid Container 应用 display: grid 的元素，是为所有 grid items 的父元素
- Grid Items GridContainer 的直接后代 其子元素不属于Grid items
- Grid Line
- Grid Track 轨道(行或列)
- Grid Cell
- Area 若干个Cell
Container属性
display: grid | inline-grid | subgrid (块级grid | 内联grid | 子grid)
grid-template-columns 定义列轨道的大小
grid-template-rows 定义行轨道的大小
grid-template-area
none | subgrid | <grid-template-rows> / <grid-template-columns>;
.a{
grid-template-areas:
"header header header"
"sidebar main ."
"footer footer footer";
}
- grid-template 前面3个的合写
.a{
grid-template:
[row1_start] "header header header"88px [row1_end]
[row2_start] "sidebar main ."auto [row2_end]
[row3_start] "footer footer footer"88px [row3_end]
/250px auto 250px;
/*或者*/
grid-template:
"header header header" 88px
"sidebar main ." auto
"footer footer footer" 88px
/250px auto 250px;
}
