grid 布局: 基于网格的 2 维布局方法
1:display: grid | inline-grid | subgrid
作用: 启用网格 grid 容器
grid: 定义一个块级的网格容器
inline-grid: 定义一个内联的网格容器
subgrid: 定义一个继承其父级网格容器的行和列的大小的网格容器, 它是其父级网格容器的一个子项.
2: 网格系统的属性
(1):grid-template-columns/grid-template-rows
grid-template-columns 列宽 (值得个数决定了列数)
grid-template-rows 行高 (值得个数决定了行数)
设置方法:
- a:
- (创建三行三列的网格结构, 值也可以设置 auto 自动分配剩余)
- grid-template-columns:33.33% 33.33% 33.33%
- grid-template-rows:33.33% 33.33% 33.33%
- b:
repeat(3,33.33%) 方法设置相同的值
- grid-template-columns:repeat(3,33.33%)
- grid-template-rows:repeat(3,33.33%)
- c:
可以添加名称:
- grid-template-columns:[line1] 25% [line2] auto [line3] 25% [line4]
- grid-template-rows:[row1] 25% [row2] auto [row3] 25% [row4]
如图
d:
1fr 每个网格所占份数
- grid-template-columns:1fr 1fr 1fr
- grid-template-rows:1fr 1fr 1fr
- (2):grid-template-areas
作用: grid-template-areas 可以配合 grid-area 定义一个显式的网格区域. grid-template-areas 定义网格区域, 然后使用 grid-area 调用声明好的网格区域名称来放置对应的网格项目. . 代表一个空的网格单元
例子:
- <section>
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </section>
- section{
- display:grid;
- background:pink;
- grid-template-columns:repeat(4,1fr);
- grid-template-rows:(3,1fr);
- grid-template-areas: "header header header header"
- "nav . . aside"
- "footer footer footer footer"
- }
- .wrap1{
- grid-area: header;
- background:#f00;
- }
- .wrap2{
- grid-area: nav;
- background:#dd0;
- }
- .wrap3{
- grid-area: aside;
- background:#0dd;
- }
- .wrap4{
- grid-area: footer;
- background:#000;
- }
效果如图:
(3):grid-column-gap/grid-row-gap/grid-gap
作用: 指定网格线的大小, 也可以说是网格子项之间的间距
grid-gap 是 grid-column-gap 和 grid-row-gap 的简称
- eg:
- grid-gap:10px
图示:
(4):justify-items/align-items
属性值:
start: 内容和网格区域的左边对齐
end: 内容和网格区域的右边对齐
center: 内容和网格区域的中间对齐
stretch: 填充整个网格区域的宽度 (默认值)
justify-items: 让网格子项的内容和列轴对齐
align-items: 让网格子项的内容和行轴对齐, 这个值对容器里面的所有网格子项都有用
- eg:
- justify-items: center;
- align-items:center;
图示:
(4)justify-content/align-content
属性值
start: 左对齐
end: 右对齐
center: 居中对齐
stretch: 填充网格容器
space-around: 在每个网格子项中间放置均等的空间, 在始末两端只有一半大小
space-between: 两边对齐, 在每个网格子项中间放置均等的空间, 在始末两端没有空间
space-evenly: 网格间隔相等, 包括始末两端
说明: 当网格子项非弹性单位, 例如每个格子的宽是 px 单位, 控制网格子项在网格系统里面的对齐方式.
justify-content 列网格线对齐
align-content 行网格线对齐
(5)grid-auto-columns/grid-auto-rows
作用: 设置隐式网格轨道的列宽和行高.
隐式网格: 当你定位网格项超出网格容器范围时, 将自动创建隐式网格轨道.
怎么创建隐式网格: 接触两个新属性 (放在网格元素上) 》
- grid-column / grid-row
- eg:
grid-column :2/3 把当前的元素放在第 2 列网格线开始到第三列网格线之间.
gird-row:1/2 把当前元素放在第 1 行网格线开始到第 2 行网格线之间.
代码示例:
- <section>
- <div>1</div>
- <div>2</div>
- <div>3</div>
- </section>
- section{
- background:pink;
- display:grid;
- }
- div{
- border:1px solid #d00;
- }
- .con1{
- grid-column: 2/3;
- grid-row: 2/3
- }
- .con2{
- grid-column: 6/7;
- grid-row: 1/2;
- }
- .con3{
- grid-column: 6/7;
- grid-row:2/3;
- }
注: 以上案例则创建了一个 2 行 6 列的网格系统. 分别把网格内的元素放在网格不同的位置.
(位置: 类似几行几列 grid-column 控制放在第几列, grid-row 控制放在第几行)
grid-auto-columns/grid-auto-rows 则是控制自动创建出来的网格的列宽和行高.
- eg:
- grid-auto-columns: 60px;
- grid-auto-rows:100px;
(5)grid-auto-flow:
作用: 当网格系统中没有设置网格内的元素固定在某个位置的时候, grid-auto-flow 可以自动去排列位置:
属性值:
row 按照行横向进行排列
column 按照列纵向进行排列
row dense 在行内按照元素的先后顺序进行排列
column dense 在列内按照元素的先后顺序排列
- eg:
- <section>
- <div>1</div>
- <div>2</div>
- <div>3</div>
- <div>4</div>
- <div>5</div>
- <div>6</div>
- </section>
- div:nth-child(2){
- grid-column:4/5;
- grid-row:2/3;
- }
注: 给第 2 个元素设置了位置. 其他元素的排列按照 grid-auto-flow 设置进行排列.
(6):justify-self/align-self
和 justify-items/align-items 的作用一样. 区别: justify-items/align-items 控制的是整个网格系统内的所用元素的对齐方式. 而 justify-self/align-self 则是添加在网格系统中的某一个元素上面, 仅对当前的元素起作用.
来源: https://www.cnblogs.com/bruce-w/p/10584484.html