-
grid-template-areas例子
查看全部 -
grid-template-areas语法
属性值
1：<grid-area-name>:使用grid-area属性设置的网格
2：".":点号代表一个空单元格
3：none：没有定义网格区域
查看全部 -
line-name(网格线的名字)
[]包裹，可以有多个名字，用空格隔开即可
--例子
查看全部 -
grid-template-columns和grid-template-rows
语法
grid-template-columns:<track-size>..| <line-name> <track-size> ...;
grid-template-rows:<track-size> | <inline-name> <track-size> ...;
参数说明
1：track-size(轨道大小)：可以使用css长度（px,em，rem等），百分比或用分数（用fr单位）
2：line-name（网格线的名字：可以选择任何名字
查看全部 -
display: grid | inline-grid | subgrid;
注意
--当元素设置成网格布局，column,float,clear,vertical-align属性无效。subgrid目前所有浏览器都不兼容
查看全部 -
单位
fr-->剩余空间分配数，类似于flex布局的属性flex-grow
gr-->网格数（目前w3c并未采纳这个单位）
查看全部 -
网格区域
--四个网格线包围的中总空间
查看全部 -
网格单元--grid cell
--两个相邻的列网格线和两个相邻的行网格线组成的是网格单元
注意
要区分网格单元和网格项，网格项是实实在在存在的，而网格单元则如同图中空白的区域，是找不到的
查看全部 -
网格轨道
--两个相邻的网格线之间为网格轨道
查看全部 -
Grid和Flexbox的区别
查看全部 -
Grid布局的优势
1：固定或弹性的轨道尺寸
2：定位项目
3：创建额外的轨道来保存内容
4：控制重叠内容(z-index)
查看全部 -
CSS网格布局简介--》二维方向的自适应
注意
而flex布局则是一维，即只能在一个方向上进行自适应
查看全部 -
网格布局从给所有网格布局元素的根元素声明"display:grid"开始查看全部
-
Grid Layout(网格布局)的认识 1.它在最近几年(2017年前后)开始在国内兴起，所以说是比较新的前端技术。 2.它属于二维布局，不同于Flex(弹性盒子)的一维布局 3.和Flex(弹性盒子)布局相比有更大的便利性，与Flex Layout在布局方面相辅相成，并不是说前者取代了后者。 4.要学好网格布局，首先要打好HTML和CSS基础，尤其要深刻认识盒子模型查看全部
-
网格项遵循grid布局，无论是块元素还是行内元素查看全部
举报