-
网格布局的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进行简写。先定义列方向在定义行方向
查看全部
举报