Grid布局

Grid Container

display: grid,网格容器

Grid Item

网格项

Grid Line

网格线

Grid Track

网格轨道,两个响铃的网格线之间的网格轨道。

Grid Cell

网格单元

Grid Area

网格区域

fr 剩余空间分配数

grid-template-columns:网格宽

grid-template-rows:网格列

grid-template-areas:网格区域

grid-gap / gap:行、列

grid-column-gap:列区域间距

grid-row-gap:行区域间距

justify-items: 水平位置

align-items: 垂直位置

place-items:列、行

justify-content:start、center、end、strecth、space-around、space-between、space-evenly

align-content:start、center、end、strecth、space-around、space-between、space-evenly

place-content:列、行

grid:简写 grid-template-rows、grid-template-columns、gird-template-areas、grid-auto-rows、grid-auto-columns-grid-auto-flow

repeat():重复 repeat(repeat, values);

​ repeat 取值:number,auto-fit,auto-fill

fit-content():

minmax()

grid-column-start

grid-column-end

grid-column

grid-row-start

grid-row-end

grid-row

grid-area: yishang heji

justify-self

align-self

文章作者: koral
文章链接: http://luokaiii.github.io/2020/09/04/前端/CSS/Grid/a/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自