-
网格布局的grid-template,使用空格分隔的多个值来定义网格的列和行:
grid-template-columns:100px auto 10% 1fr 2fr;网格有有5列,第一列宽度为100px,第二列为每个单元格内容的宽度,第三列为网格容器宽度的10%,第四列、第五列是总宽度减去一二三列的宽度后按1:2的比列分配的宽度
grid-template-rows:200px auto;网格有两行,第一行高度为200px,第二行高度为单元格内容的高度
若单元格数多于写的行数和列数,后面为定义的行的宽度为auto
查看全部 -
grid-template
属性值
轨道大小(track-size):px/em/%/fr(分数)/auto(剩余部分)
grid-template-columns列
grid-template-rows 行
查看全部 -
1.作用在网格内容中的容器属性
display grid-template gap items
content grid-auto grid
2.Display
display:grid| inline-grid| subgrid;
<div class="container"> <div class="item">one</div> <div class="item">two</div> <div class="item">three</div> <div class="item">four</div> <div class="item">five</div> </div> .container{ display:grid|inline-grid|subgrid }
grid 生成块级网格 inline-grid 生成行内网格
*当元素设置了网格布局,column、float、clear、vertical-align属性无效
查看全部 -
网格区域。
查看全部 -
Flexbox 是一维布局,只能在一条直线上放置内容区块;
Grid是一个二维布局,根据设计需求将内容区块放置到任何地方。
查看全部 -
啦啦啦查看全部
-
Flexbox 是一维布局,只能在一条直线上放置内容区块;
Grid是一个二维布局,根据设计需求将内容区块放置到任何地方。
查看全部 -
template 的一种简洁的写法
查看全部 -
如图,简写实例
查看全部 -
属性值的定义
查看全部 -
实际进行编写的顺序
查看全部 -
grid可以进行下面所有属性的简写
查看全部 -
属性值的定义
查看全部 -
如图,控制自动布局算法的工作方式
查看全部 -
属性值的定义
查看全部 -
使用grid-auto来定义隐式网格轨道
查看全部 -
由于网格项过多从而自动增加的网格行,被称为隐式网格轨道,改变行高时,隐式网格轨道是不会发生改变的
查看全部 -
可以使用place-content进行简写。先定义列方向在定义行方向
查看全部
举报