grid栅格布局

发布时间：2020-12-24 19:02:29 所属栏目：资源来源：网络整理

导读：之前用来布局的方法： 1、table布局 2、float浮动及 position定位布局，需要考虑对其他元素的影响 3、flex弹性盒模型布局，可以解决排列方向，对齐方式，自适应尺寸的问题现在学习一种新的布局方法：Grid布局，网格布局。是基于二维网格的布局系统，网格内

使用repeat()函数可以给网格线分配相同的名称。相同网格线名称指定网格线的位置和名称，也且会自动在网格线名称后面添加对应的数字，使其网格线名称也是唯一的标识符。

grid-template-rows: repeat(,[row-start] 1fr [row--template-columns: repeat(,[col-start] 1fr [col-end]);

隐式网格

网格默认方向是row,可以通过grid-auto-flow属性把网格流的方向改变成column

: column

当网格项目确认在显示网格之外时就会创建隐性网格，当没有足够的空间或者显示的网格轨道来设置网格项目，此时网格项目就会自动创建隐式网格。

和属性可以定义隐式的网格，默认值auto

网格项目可以具有层级和堆栈，必要时可能通过属性来指定

和指定网格项目沿着行轴对齐方式; 和指定网格项目沿着列轴对齐方式。

justify-items和align-items应用在网格容器上

justify-self和align-self应用于网格项目自身对齐方式

这四个属性主要接受以下属性值：

auto、normal、start、 end、 center、 stretch、 baseline、 first baseline、 last baseline

指定网格轨道沿着行轴对齐方式;

指定网格轨道沿着列轴对齐方式。它们支持下面的属性：

normal、 start、 end、 center、 stretch、

space-around、 space-between、 space-evenly、 baseling、

first baseline、 last baseline

（编辑：衡阳站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!