栅格系统布局学习
2022/1/29 6:04:18
本文主要是介绍栅格系统布局学习,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
声明容器
选项 | 说明 |
---|---|
display: grid; | 块级容器 |
display: inline-grid; | 行级容器 |
划分行列
栅格有点类似表格,也 行
和 列
。使用 grid-template-columns
规则可划分列数,使用 grid-template-rows
划分行数。
重复设置
使用 repeat
统一设置值,第一个参数为重复数量,第二个参数是重复值
display: grid; grid-template-rows: repeat(2, 50%); grid-template-columns: repeat(2, 100px 50px);
自动填充
width: 300px; height: 240px; display: grid; grid-template-rows: repeat(auto-fill, 100px); grid-template-columns: repeat(auto-fill, 100px);//6 div
比例划分
width: 300px; height: 100px; display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr 2fr);
组合定义
注意:grid-tempalte
是 grid-template-rows
、grid-template-columns
、grid-template-areas
的三个属性的简写。
display: grid; grid-template: repeat(2, 1fr) / repeat(2, 1fr 2fr);
设置取值范围
使用 minmax
方法可以设置取值范围,下列在行高在 最小100px ~ 最大1fr
间取值。
width: 300px; height: 300px; display: grid; grid-template-rows: 100px minmax(100px, 1fr);//最小100px,最大无穷大 grid-template-columns: 100px 1fr;
间距定义
grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr); row-gap: 20px; column-gap: 20px; //简写如下 gap: 20px 10px;
合并单元格
div:last-child{ grid-row-start: 1; //第一行开始 grid-column-start: 1; //第一列开始 grid-row-end: 3; //第三行结束 grid-column-end: 2; //第二列结束 } //简单写法1 grid-row: 1/3; grid-column: 1/2; //简单写法2 grid-area: 1/1/3/2;
栅格流动
在容器中设置grid-auto-flow
属性可以改变单元格排列方式。
选项 | 说明 |
---|---|
column | 按列排序 |
row | 按行排列 |
dense | 元素使用前面空余栅格(下面有示例说明) |
grid-auto-flow: row dense;
元素对齐方式
可以通过属性方便的定义栅格或元素的对齐方式
选项 | 说明 | 对象 |
---|---|---|
justify-content | 所有栅格在容器中的水平对齐方式,容器有额外空间时 | 栅格容器 |
align-content | 所有栅格在容器中的垂直对齐方式,容器有额外空间时 | 栅格容器 |
align-items | 栅格内所有元素的垂直排列方式 | 栅格元素 |
justify-items | 栅格内所有元素的横向排列方式 | 栅格元素 |
align-self | 对一个元素在栅格中垂直对齐方式 | 栅格元素 |
justify-self | 对一个元素在栅格中水平对齐方式 | 栅格元素 |
justify-content/align-content属性的值如下
值 | 说明 |
---|---|
start | 容器左边 |
end | 容器右边 |
center | 容器中间 |
stretch | 撑满容器 |
space-between | 第一个栅格靠左边,最后一个栅格靠右边,余下元素平均分配空间 |
space-around | 每个元素两侧的间隔相等。所以,栅格之间的间隔比栅格与容器边距的间隔大一倍 |
space-evenly | 栅格间距离完全平均分配 |
简写:place-content:垂直 水平;
justify-items/align-items属性的值如下
值 | 说明 |
---|---|
start | 元素对齐栅格的左边 |
end | 元素对齐栅格的右边 |
center | 元素对齐栅格的中间 |
stretch | 水平撑满栅格 |
简写:place-items:垂直 水平;
justify-self与align-self属性的值如下
值 | 说明 |
---|---|
start | 元素对齐栅格的左边 |
end | 元素对齐栅格的右边 |
center | 元素对齐栅格的中间 |
stretch | 水平撑满栅格 |
简写:place-self:垂直 s
这篇关于栅格系统布局学习的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-23Springboot应用的多环境打包入门
- 2024-11-23Springboot应用的生产发布入门教程
- 2024-11-23Python编程入门指南
- 2024-11-23Java创业入门:从零开始的编程之旅
- 2024-11-23Java创业入门:新手必读的Java编程与创业指南
- 2024-11-23Java对接阿里云智能语音服务入门详解
- 2024-11-23Java对接阿里云智能语音服务入门教程
- 2024-11-23JAVA对接阿里云智能语音服务入门教程
- 2024-11-23Java副业入门:初学者的简单教程
- 2024-11-23JAVA副业入门:初学者的实战指南