grid布局属性（grid布局方式）

科技前沿 • 2025-05-24 11:52 • 阅读 36

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

 <p>不同于传统的布局采用positon+display+float、felx一维布局，grid是有行和列的二维布局。<br>首先指定一个容器，然后在容器中划分行列形成“单元格”或者网格，最后把“项目”放置到相应的网格中。<br>grid: 默认每个项目都是”块级”, 垂直排列<br>flex: 默认每个项目都是”行内块级”, 水平排列<br><img src="https://img.php.cn/upload/image/613/842/760/78492.png" alt=""></p>

讯享网

1. grid-template-columns

2. grid-template-rows

上图中原来的分割线名称由默认的数值已经改变成了自定义的r1 2 3 4

讯享网

3. grid-template-areas

grid-template-areas 属性用于设置网格布局。
grid-area 属性可以对网格元素进行命名。
命名的网格元素可以通过容器的 grid-template-areas 属性来引用。
每行由单引号内’’定义，以空格分隔。
. 号表示没有名称的网格项。

上图为占用2列示例，下图为占用行示例：

4. grid-auto-flow
容器默认设定项目的排列方式为row，即按照一行排，如果满一行则自动下一行，也可以设置为：
column ，

5. place-content
justify-content
align-content

5.1 对齐方式

属性说明 center 居中排列 start 从行首开始排列 end 从行尾开始排列 flex-start 从行首起始位置开始排列 flex-end 从行尾位置开始排列 left 一个挨一个在对齐容器得左边缘 right 元素以容器右边缘为基准，一个挨着一个对齐

5.2 基线对齐

属性 baseline first baseline last baseline

5.3 分配弹性元素方式

属性说明 space-between 均匀排列每个元素,首个元素放置于起点，末尾元素放置于终点，两段对齐 space-around 均匀排列每个元素,每个元素周围分配相同的空间，分散对齐 space-evenly 均匀排列每个元素,每个元素之间的间隔相等 stretch 均匀排列每个元素,’auto’-sized 的元素会被拉伸以适应容器的大小

5.4 溢出对齐方式