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

Haskell函数式编程来源：网络编辑：小编更新时间：2026-01-19 16:45:07 浏览量：25

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 溢出对齐方式

属性 safe center unsafe center

5.5 全局值

属性 inherit initial

6. place-items
justify-items
align-items

属性说明 strech 默认，元素被拉伸以适应容器 center 元素位于容器中心 flex-start 元素位于容器的开头 flex-end 元素位于容器的结尾 initial 默认 inherit 继承

7. grid-auto-columns
默认的列尺寸【同下】

8. grid-auto-rows
理解1：默认的行尺寸，但是会被设定的grid-template-column 、grid-template-row覆盖
理解2：在已设置的列、行范围外的元素尺寸

9. gap
grid-row-gap（新标准为：row-gap）
grid-column-gap（新标准为：column-gap）
grid-gap（新标准为：gap）
gap就是项目item之间的距离，默认为：row-gap , column-gap

1. grid-row
是grid-row-start和grid-row-end的简写，
grid-row-start
grid-row-end

2. grid-column
grid-column-start
grid-column-end

3. grid-area
grid-area: 行开始 / 列开始 / 行结束 / 列结束

grid-area: 2 / 2 / span 2 / span 2;
span ：偏移跨越几行几列，直接增加数字更方便

到此这篇grid布局属性（grid布局方式）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

上一篇：快手买东西支付方式怎么设置（快手买东西怎么设置支付密码）

下一篇：窗口函数row_number和rank的区别（窗口函数和group by的区别）

版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/haskellbc/28056.html

相关文章：