grid网格系统（grid网格线）

科技前沿 • 2025-04-28 14:22 • 阅读 54

大家好，我是讯享网，很高兴认识大家。

grid布局：基于网格的2维布局方法
1：display: grid | inline-grid | subgrid
作用：启用网格grid容器

2:网格系统的属性
（1）：grid-template-columns/grid-template-rows
grid-template-columns 列宽(值得个数决定了列数)
grid-template-rows 行高（值得个数决定了行数）
设置方法：

讯享网

讯享网

（2）：grid-template-areas
作用：grid-template-areas可以配合grid-area定义一个显式的网格区域。grid-template-areas定义网格区域，然后使用grid-area调用声明好的网格区域名称来放置对应的网格项目。 .代表一个空的网格单元
例子：

讯享网

效果如图：

（3）：grid-column-gap/grid-row-gap/grid-gap
作用：指定网格线的大小，也可以说是网格子项之间的间距
grid-gap是grid-column-gap和grid-row-gap的简称

eg:

图示：

（4）：justify-items/align-items

讯享网

eg:

图示：

讯享网

说明：当网格子项非弹性单位，例如每个格子的宽是px单位，控制网格子项在网格系统里面的对齐方式。

justify-content 列网格线对齐

align-content 行网格线对齐

隐式网格：当你定位网格项超出网格容器范围时，将自动创建隐式网格轨道。
怎么创建隐式网格：接触两个新属性（放在网格元素上）》
grid-column / grid-row

eg：
grid-column ：2/3 把当前的元素放在第2列网格线开始到第三列网格线之间。
gird-row：1/2 把当前元素放在第1行网格线开始到第2行网格线之间。

代码示例：

讯享网

（5）grid-auto-flow:
作用：当网格系统中没有设置网格内的元素固定在某个位置的时候，grid-auto-flow可以自动去排列位置：
属性值：

讯享网

eg:

讯享网

注:给第2个元素设置了位置。其他元素的排列按照grid-auto-flow设置进行排列。

（6）：justify-self/align-self

和justify-items/align-items的作用一样。区别：justify-items/align-items控制的是整个网格系统内的所用元素的对齐方式。而justify-self/align-self则是添加在网格系统中的某一个元素上面，仅对当前的元素起作用。