CSS3 Grid Layout & <track-size> & <line-name>
grid container
grid-template: <grid-template-rows> / <grid-template-columns>===grid-template-rows+grid-template-columns
.container {
display: grid;
/* grid-template: <grid-template-rows> / <grid-template-columns> */
/* grid-template: <grid-template-rows> / <grid-template-columns> */
}
/* track-size */
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 50px 100px;
}
/* line-name */
.container {
grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
bracket syntax for the line names
索引
/* 网格线 */
/* columns 正向 从左到右 */
[1] column item1 [2] column item2 [3] column item3 [4] column item4 [5] column item5 [6]
/* columns 逆向 从右到左 */
[-6] column item1 [-5] column item2 [-4] column item3 [-3] column item4 [-2] column item5 [-1]
/* 网格线 */
/* rows 正向 从上到下 */
[1]
row item1
[2]
row item2
[3]
row item3
[4]
/* columns 逆向 从下到上 */
[-4]
row item1
[-3]
row item2
[-2]
row item3
[-1]
name
a line can have more than one name
/* 网格线 */
/* columns 正向 从左到右 */
[first] column item1 [line2] column item2 [line3] column item3 [col4-start] column item4 [five] column item5 [end]
/* 网格线 */
/* rows 正向 从上到下 */
[row1-start]
row item1
[row1-end row2-start]
row item2
[third-line row2-end]
row item3
[last-line]
/* bracket name */
.container {
grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
/* repeat */
.container {
grid-template-columns: repeat(3, 20px [col-start]);
}
/* equivalent to */
.container {
grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}
图解
自定义 line-name
默认的 line index
refs
https://css-tricks.com/snippets/css/complete-guide-grid/#
http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
自定义 line-name
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！