grid属性-实例演示和总结
程序员文章站
2022-03-03 23:39:01
...
grid属性-实例演示和总结
全部grid属性,进行实例演示,并记住讲过每一个属性值的意义,写出总结
1. 全部grid属性
- 1.1 grid容器属性
属性 | 描述 |
---|---|
grid-template-rows | 轨道行高 |
grid-template-columns | 轨道列宽 |
gap | 轨道间距 |
grid-auto-flow | 隐式轨道排列方式,默认行优先 |
grid-auto-rows | 隐式轨道行高 |
grid-auto-columns | 隐式轨道列宽 |
- 1.2 grid项目属性
属性 | 描述 |
---|---|
grid-area | 网格定位 |
2. 实例演示
-
body
中添加grid父子元素
<!-- grid 实例演示 -->
<div class="container">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
<span class="item">item4</span>
<span class="item">item5</span>
<span class="item">item6</span>
</div>
-
style
标签中添加grid基础样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* grid容器属性 */
.container {
width: 25em;
margin: 1em auto;
/* 转换为grid网格容器 */
display: grid;
/* 设置2行3列布局 */
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
/* grid容器项目 */
.container .item {
background-color: lightcyan;
border: 1px solid #000;
padding: .2em;
margin: .5em;
}
-
2.1 grid容器属性实例演示
- 2.1.1 grid-template-rows | 轨道行高
/* grid-template-rows | 轨道行高 */
.container {
/* 默认值 */
grid-template-rows: auto;
/* 第1行的行高5em,第二行的行高3em */
grid-template-rows: 5em 3em;
}
- 2.1.2 grid-template-columns | 轨道列宽
/* grid-template-columns | 轨道列宽 */
.container {
/* 第一列5em,第二列6em,第三列7em */
grid-template-columns: 5em 6em 7em;
}
- 2.1.3 gap | 轨道间距
/* gap | 轨道间距 */
.container {
/* 行间距0.5em,列间距1em */
gap: .5em 1em;
}
-
2.1.4 grid-auto-flow | 隐式轨道排列方式
- .container 内最后一个子元素后
span.item{item$@7}*3
额外添加 3 个元素,body
标签中为
<div class="container">
<span class="item">item1</span>
<span class="item">item2</span>
<span class="item">item3</span>
<span class="item">item4</span>
<span class="item">item5</span>
<span class="item">item6</span>
<span class="item">item7</span>
<span class="item">item8</span>
<span class="item">item9</span>
</div>
-
原先的 2 行 3 列之外额外增加的 item7~item9 自动生成到网格中的项目为隐式轨道
-
style
标签中继续添加样式
/* grid-auto-flow | 隐式轨道排列方式 */
.container .item:nth-of-type(6)~* {
/* 最后添加的三个项目更改背景色 */
background-color: lightseagreen;
}
.container {
/* 先行后列,默认行优先 */
grid-auto-flow: row;
/* 列优先排列 */
grid-auto-flow: column;
}
- .container 内最后一个子元素后
-
2.1.5 grid-auto-rows | 隐式轨道行高
/* grid-auto-rows | 隐式轨道行高 */
.container {
/* 改回行优先 */
grid-auto-flow: row;
/* 设置隐式轨道,最后添加的7、8、9,行高自动默认值 */
grid-auto-rows: auto;
grid-auto-rows: 1fr;
/* 设置隐式轨道,最后添加的7、8、9行高4em */
grid-auto-rows: 4em;
}
-
2.1.6 grid-auto-columns | 隐式轨道列宽
/* grid-auto-columns | 隐式轨道列宽 */
.container {
/* 改为列优先 */
grid-auto-flow: column;
/* 设置隐式轨道,最后添加的7、8、9,列宽自动默认值 */
grid-auto-columns: auto;
grid-auto-columns: 1fr;
/* 设置隐式轨道,最后添加的7、8、9列宽5em */
grid-auto-columns: 5em;
}
-
2.2 grid项目属性实例演示
- grid-area | 网格定位
/* grid-area | 网格定位 */
.container .item:nth-of-type(7) {
/* 将项目7移到第1行第2列位置,再跨两行 */
grid-area: 1/2/span 2;
}
3. 写总结
- display:grid 将元素转为块元素
- grid容器与grid容器项目之间是父子关系
- grid容器通过
grid-template-rows
和grid-template-columns
初始化一个显式容器 - gap计算行列轨道间距,比较不容易溢出容器框
- grid-auto-flow方便在行或列方向*添加新的项目,给与默认的行高和列宽
- grid-auto-rows为隐式轨道排列为行方向(默认)为新添加的项目设置行高
- grid-auto-columns为隐式轨道排列为列方向为新添加的项目设置列宽
- grid-area方便为容器的项目移动定位
上一篇: php bom 中文乱码怎么办
下一篇: 完整示例php+pdo实现的购物车类