CSS3 Grid Layout & <track-size> & <line-name>

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];
}