复杂布局之光——Grid布局
初识Grid布局
- 一、Grid布局的含义
- 二、Grid布局基础概念
- 三、Grid布局容器属性
- Grid布局项目属性
一、Grid布局的含义
1.Grid布局含义:
Grid布局,也被称为网格布局,在2017年才被广泛支持。网格容器的子元素可以自己定位,以便它们像 CSS 定位的元素一样,真正的有重叠和层次。
2.如何使用Grid布局?
在父元素上设置:display: grid | inline-grid | subgrid
grid
:定义一个块级的网格容器
inline-grid
:定义一个内联的网格容器
subgrid
:定义一个继承其父级网格容器的行和列的大小的网格容器,它是其父级网格容器的一个子项。
注:column
, float
, clear
和vertical-align
对网格容器没有效果。
3.Grid布局和flex布局的差异
flex 布局一次只能处理一个维度上的元素布局,一行或者一列。
Grid 布局是将容器划分成了“行”和“列”,产生了一个个的网格,我们可以将网格元素放在与这些行和列相关的位置上,从而达到我们布局的目的。
flex 布局示例:
Grid 布局示例:
二、Grid布局基础概念
1.网格容器和项目
采用网格布局的区域,称为"容器"(container)
容器内部采用网格定位的子元素,称为"项目"(item)
2.网格轨道
一个网格轨道就是网格中任意两条线之间的空间。
3.网格线
Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。
正常情况下,n行有n + 1根水平网格线,m列有m + 1根垂直网格线,比如三列就有四根纵向网格线。
4.网格单元
一个网格单元是在一个网格元素中最小的单位
一旦一个网格元素被定义在一个父级元素当中,那么他的子级元素将会排列在每个事先定义好的网格单元中
5.网格区域
网格元素可以向行或着列的方向扩展一个或多个单元,并且会创建一个网格区域。
网格区域的形状应该是一个矩形 ——也就是说你不可能创建出一个类似于“L”形的网格区域。
6.网格间距
两个网格单元之间的 网格横向间距 或 网格纵向间距
三、Grid布局容器属性
1.display属性
display: grid | inline-grid | subgrid
2.定义列宽和行高
属性 | 说明 |
---|---|
grid-template-columns
|
定义每一列的列宽 |
grid-template-rows
|
定义每一行的行高 |
注:可使用以下几种方法
- repeat()
简化重复的值
例如:
grid-template-columns: repeat(3, 33.33%);
- auto-fill 关键字
表示自动填充
例如:
grid-template-columns: repeat(auto-fill, 100px);
- fr 关键字
fraction 的缩写,意为"片段"
例如:
grid-template-rows: repeat(3,1fr);
- minmax()
表示长度就在这个范围之中
例如:
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
表示列宽不小于100px,不大于1fr
- auto 关键字
表示由浏览器自己决定长度
例如:
grid-template-columns: 100px auto 100px;
左右两个单元格固定宽度100px,中间为自动剩下的宽度
- 网格线的名称
可以使用方括号,指定每一根网格线的名字,方便以后的引用
例如:
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
3.设置间距
属性 | 说明 |
---|---|
grid-gap
|
合并简写形式 grid-gap: < grid-row-gap> < grid-column-gap>;
|
grid-row-gap
|
用于设置行间距 |
grid-column-gap
|
用于设置列间距 |
注:如果grid-gap
省略了第二个值,浏览器认为第二个值等于第一个值
根据最新标准,上面三个属性名的grid-前缀已经删除,grid-column-gap和grid-row-gap写成
column-gap
和row-gap
,grid-gap写成gap
4.定义区域
属性:grid-template-areas
grid-template-areas: 'a b c''d e f''g h i';
多个单元格合并成一个区域的写法:
grid-template-areas: 'a a a''b b b''c c c';
5.容器的子元素顺序
属性 | 值 | 说明 |
---|---|---|
row | 先行后列 | |
grid-auto-flow
|
column | 先列后行 |
row dense | 先行后列,并且尽量填满空格 | |
column dense | 先列后行,并且尽量填满空格 |
6.设置单元格内容
justify-items属性设置单元格内容的水平位置(左中右)
属性 | 值 | 说明 |
---|---|---|
start | 对齐单元格的起始边缘 | |
justify-items
|
end | 对齐单元格的结束边缘 |
center | 单元格内部居中 | |
stretch | 拉伸,占满单元格的整个宽度(默认值) |
align-items属性设置单元格内容的垂直位置(上中下)
属性 | 值 | 说明 |
---|---|---|
start | 对齐单元格的上边缘 | |
align-items
|
end | 对齐单元格的下边缘 |
center | 单元格内部居中 | |
stretch | 拉伸,占满单元格的整个高度(默认值) |
注:place-items
属性是align-items属性和justify-items属性的合并简写形式
7.内容区域在容器里面的位置
justify-content属性是整个内容区域在容器里面的水平位置(左中右)
属性 | 值 | 说明 |
---|---|---|
start | 对齐容器的起始边框 | |
end | 对齐容器的结束边框 | |
center | 容器内部居中 | |
justify-content
|
stretch | 项目大小没有指定时,拉伸占据整个网格容器 |
space-around | 每个项目两侧的间隔相等,项目之间的间隔比项目与容器边框的间隔大一倍 | |
space-between | 项目与项目的间隔相等,项目与容器边框之间没有间隔 | |
space-evenly | 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔 |
align-content属性是整个内容区域的垂直位置(上中下)
属性 | 值 | 说明 |
---|---|---|
start | 对齐容器的上边框 | |
end | 对齐容器的下边框 | |
center | 容器内部居中 | |
align-content
|
stretch | 项目大小没有指定时,拉伸占据整个网格容器 |
space-around | 每个项目上下的间隔相等,项目之间的间隔比项目与容器边框的间隔大一倍 | |
space-between | 项目与项目的上下间隔相等,项目与容器边框之间没有间隔 | |
space-evenly | 项目与项目的上下间隔相等,项目与容器边框之间也是同样长度的间隔 |
注:place-content
属性是align-content属性和justify-content属性的合并简写形式
8.多余网格的列宽和行高
grid-auto-columns
属性和grid-auto-rows
属性用来设置,浏览器自动创建的多余网格的列宽和行高。
它们的写法与grid-template-columns
和grid-template-rows
完全相同。如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高。
Grid布局项目属性
1.指定项目位置
属性 | 说明 |
---|---|
grid-column-start
|
左边框所在的垂直网格线 |
grid-column-end
|
右边框所在的垂直网格线 |
grid-row-start
|
上边框所在的水平网格线 |
grid-row-end
|
下边框所在的水平网格线 |
属性 | 说明 |
---|---|
grid-column
|
grid-column-start 和grid-column-end 的合并简写形式
|
grid-row
|
grid-row-start 属性和grid-row-end 的合并简写形式
|
grid-area
指定项目放在哪一个区域,与容器定义区域配合使用
.item-1 {grid-area: e;
}
也可以用作grid-row-start
、grid-column-start
、grid-row-end
、grid-column-end
的合并简写形式,直接指定项目的位置。
.item-1 {grid-area: 1 / 1 / 3 / 3;
}
2.设置单元格内容的位置
justify-self属性设置单元格内容的水平位置(左中右),跟justify-items属性的用法完全一致,但只作用于单个项目。
属性 | 值 | 说明 |
---|---|---|
start | 对齐单元格的起始边缘 | |
justify-self
|
end | 对齐单元格的结束边缘 |
center | 单元格内部居中 | |
stretch | 拉伸,占满单元格的整个宽度(默认值) |
align-self属性设置单元格内容的垂直位置(上中下),跟align-items属性的用法完全一致,也是只作用于单个项目。
属性 | 值 | 说明 |
---|---|---|
start | 对齐单元格的上边缘 | |
align-self
|
end | 对齐单元格的下边缘 |
center | 单元格内部居中 | |
stretch | 拉伸,占满单元格的整个高度(默认值) |
注:place-self属性是align-self属性和justify-self属性的合并简写形式。
复杂布局之光——Grid布局相关推荐
- jqgrid使用本地静态数据创建网格的例子_什么是网格布局?grid布局有哪些优势?开发过程中遇到什么问题?...
链接:https://www.jianshu.com/p/d183265a8dad 目前浏览器还不支持Grid布局,IE10和IE11支持老的语法.如果你想体验Grid布局的强大,推荐使用开通过&qu ...
- python系列tkinter之pack布局、place布局和grid布局
tkinter以提供3种界面组件布局管理的方法,分别是:pack,grid,place接下来我们来介绍pack.place和grid. 1.place布局 我们介绍place布局,就做一个简易的账号, ...
- 弹性布局和grid布局
了解 在学习弹性布局之前首先就要明白其概念 flex 就是flexible box的缩写,意为弹性布局,用来为盒装模型提供最大的灵活性 任何一个容器都可以指定为flex布局 .box{ display ...
- grid layout(网格布局、栅格布局、grid布局):bootstrap,请到历史书报道!
grid布局就是表格布局(grid layout),或者称之为栅格布局也行.因为栅格布局的概念来自于bootstrap,这里使用栅格布局来与bootstrap做关联,是因为它俩是描述的同一个东西.自从 ...
- 网格布局(grid布局)
网格布局 他可以将页面分为多个网格,可以任意组合不同的网格 ,做出各种各样的布局. 网格布局为二维性质的. 设置行.列间距 grid-row-gap:1rem ;行间距 ** grid-column- ...
- css之前端5种布局方式之table布局、float布局、absolute布局、flexbox布局、grid布局
1.表格布局(不推荐) 父级容器为display:table 表格 子级容器为display:table-cell 一个单元格 特点:在没有特别设置的情况下,子级是自动平分宽度并填满父级的. tabl ...
- html grid布局,css grid布局使用
Note:设置网格布局后,容器子元素(项目)的float.display:inline-block. display:table-cell. vertical-align 和Column-*等设置都将 ...
- android recyclerview 横向item 宽度,RecyclerView的item宽度不能全屏显示及线性布局与grid布局切换混乱解决方法...
1.RecyclerView的Item宽度不能全屏显示 出现这种的原因有两种: 1.第一种是在adapter中加载inflater时parent传入为null 2.如果第一种不行,第二种原因就是在Re ...
- Grid布局和Flex布局
Flex布局(弹性布局) Flex是弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为Flex布局.行内元素也可以使用Flex布局. 采用Flex布局的元素,称为Flex容器.flex ...
最新文章
- 一份火爆国外的PyCharm快捷键和Python代码速查表
- Linux从入门到精通系列之SHELL编程循环语句语法及实例详解(forwhileuntil)
- Python:windows程序打包
- hbase集群无法重启的可能原因之一及解决办法
- java string
- oracle11 不能连接,oracle11G ora 12514 tns监听程序当前无法识别连接描述符中请求的服务...
- (转)直接拿来用!最火的iOS开源项目(一)
- systrace html空白,Android性能优化之Systrace工具介绍(一) _ Systrace生成的trace.html打开空白或者打不开的解决办法...
- css中的display属性值:table,table-row,table-cell
- 微信小程序 禁止弹框下面的内容滑动 弹窗禁止底部内容滚动
- springCloud - 第8篇 - 配置文件管理中心 - 集群模式(负载匀衡)使用
- STL系列使用教程(一)基础概念
- 高性能访客记录系统如何设计?
- java常用类的特征_Java常用类-包装类
- Git可视化工具-小乌龟
- 职称计算机 frontpage 2003,职称计算机考试大纲:FrontPage2003网页设计与制作
- 数字转换为汉语中人民币的大写
- HDU-4699 对顶栈
- 客户至上 | 国产BI领跑者,思迈特软件完成C轮融资
- pythonmacd指标编写_利用python编写macd、kdj、rsi、ma等指标
热门文章
- KPCB:2013年互联网女皇互联网趋势报告–解读版
- 七个要点诱惑玩家陷入你的游戏魅力
- SpringCloud微服务架构
- Forgotten Artefacts开启预售
- C++简单的动漫管理系统
- 交计算机作业上师大,【图】- 师大21年新出《计算机体系结构》作业考核标准 - 昆山玉山其他教育培训 - 昆山百姓网...
- coreldraw课表设计作品_张张经典,精选50款俄罗斯设计师LOGO设计作品
- 从米饭开始的爱情同样甜蜜
- 人工智能,搜索巨头的进击之道
- 巨人的阴影之下:爱因斯坦的科学家妻子从未实现过梦想……