Grid 布局

Posted 2023-05-07

参考技术A

Grid 布局与 Flex 布局 有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是 一维布局 。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是 二维布局 。Grid 布局远比 Flex 布局强大。

display 布局
grid-template-columns 列
grid-template-rows 行
grid-template-areas 区域
grid-template 行 列 区域简写

grid-column-gap 列间隔
grid-row-gap 行间隔
grid-gap 简写

justify-items 项目内容横向排列方式
align-items 项目内容纵向排列方式
place-items 简写

justify-content 内容横向排列方式
align-content 内容纵向排列方式
place-content 简写

grid-auto-columns 隐式（多出来未定义的格子）列宽
grid-auto-rows 隐式（多出来未定义的格子）行高

grid-auto-flow 排列方式

grid 行 列 区域 隐式格子宽 隐式格子高 排列方式简写

grid-column-start 定位列线开始位置
grid-column-end 定位列线结束位置
grid-column 简写

grid-row-start 定位行线开始位置
grid-row-end 定位行线结束位置
grid-row 简写

grid-area 区域

justify-self 单个项目内容横向对其方式
align-self 单个项目内容纵向对其方式
place-self 简写

可以是以下单位：

grid-template 是 grid-template-rows ， grid-template-columns ， grid-template-areas 简写属性

grid-column-gap == column-gap

grid-row-gap == row-gap

grid-gap == gap

水平方向

垂直方向

简写方式

水平方向

垂直方向

简写方式

在一个声明中设置所有以下属性的简写： grid-template-rows , grid-template-columns , grid-template-areas , grid-auto-rows , grid-auto-columns , 和 grid-auto-flow 。（注意：您只能在单个网格声明中指定显式或隐式网格属性）。

grid-column-start | grid-column-end 列从第几根线开始，第几根线结束

grid-row-start | grid-row-end 行从第几根线开始，第几根线结束

grid-column | grid-row 简写

表示跨几行或几列

水平方向

垂直方向

简写方式

知识归纳-网格布局-grid

参考技术A

display:grid/inline-grid;
[会把元素转换为块元素/行内元素]

划分行： grid-template-rows: val val ...;
划分列： grid-template-columns: val val ...;
[val值的个数表示行数]

设置行间距： grid-row-gap: val;
设置列间距： grid-column-gap: val;
复合写法： grid-gap: val(row) val(col);

指定子元素排列的方向: grid-auto-flow:column | row
     [默认值为row]

水平对齐方式：
justify-content:start | end | center | stretch | space-around | space-between | space-evenly;
垂直对齐方式：
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
复合写法： place-content: 垂直对齐方式 水平对齐方式
     [ space-evenly :网格与网格间、网格与边框间的间距相等，对标 space-around ]

水平对齐方式： justify-items:start | end | strech;
垂直对齐方式： align-items: start | end | center | stretch;
     [若项目没有设置宽高，则默认适用 justify-items:stretch ]
复合写法： place-items:垂直对齐方式 水平对齐方式;

     [假定为3x3的网格]
垂直网格线： grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
水平网格线： grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
     [默认名称为1,2,3,4(-4,-3,-2,-1) 且不会被覆盖]

合并列：
grid-column-start: 合并起点的纵向网格线名称;
grid-column-end: 合并终点的纵向网格线名称;
合并行：
grid-row-start: 合并起点的纵向网格线名称;
grid-row-end: 合并终点的纵向网格线名称;
复合写法：
合并列： grid-column:start/end
合并行： grid-row:start/end

     [假定为3x3的网格]
指定网格区域：

     [单引号、双引号皆可]
     [区域名称可单行显示也可折行显示]
     [无用区域可用.来表示]

分配项目： grid-area:区域名称;
     [若指定区域为复数且相邻为长方形或正方形时，会自动合并]
     [指定时区域名称不用引号]