css grid

display	display: grid | inline-grid | subgrid; //注意： column, float, clear, 和 vertical-align 对网格容器没有影响。 grid 生成一个块级网格 inline-grid 生成一个内联网格 subgrid  如果你的网格容器本身就是一个嵌套网格，那么你可以使用这个属性来表示你想从它的父节点取得它的行/列的大小，而不是指定它自己的大小。
grid-template-columns 和 grid-template-rows	.container { grid-template-columns: 40px 50px auto 50px 40px; grid-template-rows: 25% 100px auto; } //自己命名网格线 .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]; } //可以有多个名称 .container { grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end]; } //定义包含重复部分,使用 repeat() 来简化写法： .container { grid-template-columns: repeat(3, 20px [col-start]) 5%; } 上面的写法等同于： .container { grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start] 5%; } //fr 单位允许你将轨道的大小设置为网格容器可用空间的一小部分。 //将每个项目设置为网格容器宽度的三分之一： .container { grid-template-columns: 1fr 1fr 1fr; } //fr 单位可用的空间总量不包括 50px ： .container { grid-template-columns: 1fr 50px 1fr 1fr; }
grid-template-areas
grid-template
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid