1、知识点
1.Grid Line
网格之间的分隔线
2.Grid Track
两个相邻网格线之间的空间
3.Grid Cell
相邻的两行和两列网格线之间的空间
4.Grid Area
四条网格线包围成的田字空间
5.Grid 属性列表:
Grid 容器属性列表全部属性:
display:
grid-template-columns
grid-template-areas
grid-template
grid-column-gap
grid-gap
justify-items
align-items
justify-content
align-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid
Grid items的全部属性
grid-column-start
gird-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area
justify-self
align-self
display:
将元素定义为grid容器
并为其内容建立新的网格格式化上下文(grid formatting context)
grid: 生成一个块级(block-level)网格
inline-grid: 生成一个行级(inline-level)网格
subgrid 从他的父(grid)网格列表获取他的行/列的大小,而不是指定自己的大小
grid-tempalte-columns: 10px 10px auto 10px;
//设置网格的宽度
grid-template-rows: 10px 10px auto;
//设置网的高度
grid-tempalte-columns: 1fr 1fr;
//两列每列各占50%;
grid-tempalte-columns: 1fr 1fr 50px;
//前两列各占出去50px的50%
grid-template-areas:
//通过引用grid-area属性指定的网格区域的名称来定义网格模板
从夫网格区域的名称导致内容扩展到这些单元格
点号表示一个空单元格
语法本身提供了网格结构的客观化
.item-1{
grid-area:header;
}
.item-2{
grid-area:left;
}
.item-3{
grid-area:right;
}
.item-4{
grid-area:footer;
}
gird-template-areas:
"header header header"
"left . right"
"footer footer footer"
grid-template:grid-template-rows,grid-template-columns,grid-template-area的简写
grid-columns-gap,grid-row-gap
//指定网格线的大小
grid-columns-gap: 10px;
rid-row-gap: 10px;
grid-gap: grid-columns-gap,gris-row-gap的缩写
justify-items
//沿着行轴方向的对齐方式
start: 左对齐
end: 右对齐
center: 中间对齐
stretch: 伸展沾满整行
align-items:
//沿着列轴方向的对齐方式
start: 顶端对齐
end: 底部对齐
center:中间对齐
stretch: 伸展占满整列
justify-content:
//容器内网格的水平对齐方式
start: 左对齐
end: 右对齐
center: 居中对齐
stretch: 扩展沾满
space-around: 列两边都隔开(margin-left,margin-right),列的左右间隔是一样的,两列之间的间隔是*2
space-between: 列之间隔开
space-evenly: 列两边都隔开(margin-left,margin-right),每个缝隙都是一样大小的
align-content:
//容器内玩个的垂直对齐方式
start:顶端对齐
end: 低端对齐
center: 中间对齐
stretch: 伸展对齐
space-around: 行两边都隔开(margin-top,margin-top),行的上下间隔是一样的,两行之间的间隔是*2
space-between: 行之间隔开
space-evenly: 行两边都隔开(margin-top,margin-top),每个缝隙都是一样大小的
grid-auto-columns/grid-auto-rows
自动生成的网格宽高
grid-auto-flow
用于控制没有显示指明网格上的item放置的位置
row: 依次填充每行,按需求添加新行
column: 依次填充每列,按需求添加列
dense: 后面的小块的item可以填充到前面的空位置中
item属性:
grid-column-start: 水平方向从哪格开始
grid-column-end: 水平方向从哪格结束
grid-rows-start: 垂直方向从哪格开始
grid-rows-end: 垂直方向从哪格结束
grid-column: grid-column-start,grid-column-end的缩写
grid-rows:grid-rows-start,grid-rows-rows的缩写
grid-area:grid-column-start,grid-column-end,grid-rows-start,grid-rows-rows的缩写
justify-self:
item内部元素的水平对齐方式
start: 水平方向左对齐
end: 水平方向右对齐
center:水平方向居中对齐
stretch: 水平方向伸展对齐
align-self:
//item内部元素垂直对齐方式
start: 垂直方向上端对齐
end: 垂直方向下端对齐
center: 垂直方向中间对齐
stretch: 垂直填充
2、实例
<style>
body {
width: 100%;
height: 50%;
}
.container1 {
width: 50%;
height: 50%;
display: inline-grid;
grid-template-columns: 30% 40% 10%;
grid-template-rows: 20% 40%;
background-color: #F2F2F2;
}
.container1 .item {
border: 1px solid red;
}
</style>
<h2>1.grid-template-columns/grid-template-rows</h2>
<p>
使用空格分割多个值来定义网格的列和行的大小.这些值表示轨道的大小
</p>
<div class="container1">
<div class="item item-1">111</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-1">111</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
</div>
<style>
.container2 {
width: 50%;
height: 50%;
display: inline-grid;
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 20% 40%;
background-color: #F2F2F2;
}
.container2 .item {
border: 1px solid red;
}
</style>
<h2>2.grid-auto-columns/grid-auto-rows</h2>
<p></p>
<div class="container2">
<div class="item item-1">111</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-1">111</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
</div>
<style>
.container3 {
width: 50%;
height: 50%;
display: inline-grid;
grid-template-columns: 50px 50px 50px 50px;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "header header header header" "main main . sidebar" "footer footer footer footer"
}
.container3 .item {
border: 1px solid red;
}
.container3 .item-1 {
grid-area: header;
}
.container3 .item-2 {
grid-area: main;
}
.container3 .item-3 {
grid-area: sidebar;
}
.container3 .item-4 {
grid-area: footer;
}
</style>
<h2>3.grid-area</h2>
<p>指定网格区域的名称来定义网格模板(属性:grid-template-areas;区域名:grid-areas)</p>
<div class="container3">
<div class="item item-1">header</div>
<div class="item item-2">main</div>
<div class="item item-3">sidebar</div>
<div class="item item-4">footer</div>
</div>
<style>
.container4 {
width: 50%;
height: 50%;
display: inline-grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
background-color: #F2F2F2;
grid-column-gap: 5px;
grid-row-gap: 5px;
}
.container4 .item {
border: 1px solid red;
}
</style>
<h2>4.grid-column-gap/grid-row-gap</h2>
<div class="container4">
<div class="item item-1">111</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-1">111</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
</div>
<style>
.container5 {
width: 50%;
height: 50%;
display: inline-grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
background-color: #F2F2F2;
grid-gap: 10px;
}
.container5 .item {
border: 1px solid red;
}
</style>
<h2>5.grid-gap: 10px</h2>
<h3>1fr:(百分比)</h3>
<div class="container5">
<div class="item item-1">111</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-1">111</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
</div>
<style>
.container6 {
width: 50%;
height: 50%;
display: inline-grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
background-color: #F2F2F2;
grid-gap: 10px;
}
.container6-1 {
justify-items: left;
}
.container6-2 {
justify-items: right;
}
.container6-3 {
justify-items: center;
}
.container6-4 {
justify-items: stretch;
}
.container6-1 .item,
.container6-2 .item,
.container6-3 .item,
.container6-4 .item {
border: 1px solid red;
}
</style>
<h2>6.justify-items</h2>
<p>网格内容水平轴对齐方式:</p>
<p>start:左端对齐</p>
<div class="container6 container6-1">
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
</div>
<p>end:右端对齐</p>
<div class="container6 container6-2">
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
</div>
<p>center: 居中对齐</p>
<div class="container6 container6-3">
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
</div>
<p>stretch: 伸展对齐</p>
<div class="container6 container6-4">
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
</div>
<style>
.container7 {
width: 50%;
height: 50%;
display: inline-grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
background-color: #F2F2F2;
grid-gap: 10px;
}
.container7-1 {
align-items: start;
}
.container7-2 {
align-items: end;
}
.container7-3 {
align-items: center;
}
.container7-4 {
align-items: stretch;
}
.container7 .item {
border: 1px solid red;
}
</style>
<h2>7.align-items</h2>
<p>网格内容垂直轴对齐方式:</p>
<p>start:上端对齐</p>
<div class="container7 container7-1">
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
</div>
<p>end:下端对齐</p>
<div class="container7 container7-2">
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
</div>
<p>center: 居中对齐</p>
<div class="container7 container7-3">
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
</div>
<p>stretch: 伸展对齐</p>
<div class="container7 container7-4">
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
</div>
<style>
.container8 {
width: 50%;
height: 50%;
display: inline-grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 1fr 1fr;
background-color: #F2F2F2;
grid-gap: 10px;
}
.container8-1 {
justify-content: start;
}
.container8-2 {
justify-content: end;
}
.container8-3 {
justify-content: center;
}
.container8-4 {
justify-content: stretch;
}
.container8-5 {
justify-content: space-around;
}
.container8-6 {
justify-content: space-between;
}
.container8-7 {
justify-content: space-evenly;
}
.container8 .item {
border: 1px solid red;
}
</style>
<h2>8.justify-content</h2>
<p>网格水平轴对齐方式(网格总大小可能小于父容器的大小):</p>
<p>start:左端对齐</p>
<div class="container8 container8-1">
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
</div>
<p>end:右端对齐</p>
<div class="container8 container8-2">
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
</div>
<p>center: 居中对齐</p>
<div class="container8 container8-3">
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
</div>
<p>stretch: 伸展对齐</p>
<div class="container8 container8-4">
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
</div>
<p>space-around: 网格之间均等间隙,两端间隙减半</p>
<div class="container8 container8-5">
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
</div>
<p>space-between: 网格之间相等间隙,两端无间隙</p>
<div class="container8 container8-6">
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
</div>
<p>space-evenly: 网格之间间隙想的,包括两端</p>
<div class="container8 container8-7">
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
</div>
<style>
.container9 {
width: 50%;
height: 50%;
display: inline-grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 20px 20px;
background-color: #F2F2F2;
grid-gap: 10px;
}
.container9-1 {
align-content: start;
}
.container9-2 {
align-content: end;
}
.container9-3 {
align-content: center;
}
.container9-4 {
align-content: stretch;
}
.container9-5 {
align-content: space-around;
}
.container9-6 {
align-content: space-between;
}
.container9-7 {
align-content: space-evenly;
}
.container9 .item {
border: 1px solid red;
}
</style>
<h2>9.align-content</h2>
<p>网格垂直轴对齐方式(网格总大小可能小于父容器的大小):</p>
<p>start:上端对齐</p>
<div class="container9 container9-1">
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
<div class="item item-4">111</div>
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
<div class="item item-4">111</div>
</div>
<p>end:下端对齐</p>
<div class="container9 container9-2">
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
<div class="item item-4">111</div>
</div>
<p>center: 居中对齐</p>
<div class="container9 container9-3">
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
<div class="item item-4">111</div>
</div>
<p>stretch: 伸展对齐</p>
<div class="container9 container9-4">
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
<div class="item item-4">111</div>
</div>
<p>space-around: 网格之间均等间隙,两端间隙减半</p>
<div class="container9 container9-5">
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
<div class="item item-4">111</div>
</div>
<p>space-between: 网格之间相等间隙,两端无间隙</p>
<div class="container9 container9-6">
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
<div class="item item-4">111</div>
</div>
<p>space-evenly: 网格之间间隙想的,包括两端</p>
<div class="container9 container9-7">
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
<div class="item item-1">
<div>222</div>
</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">111</div>
<div class="item item-4">111</div>
</div>
<style>
.container10 {
width: 50%;
height: 50%;
display: grid;
background-color: #F2F2F2;
grid-template-columns: 60px 90px;
/* 定义行单位的宽度 */
grid-template-rows: 60px 90px;
/* 定义高单位的宽度 */
grid-gap: 5px;
}
.container10 .item {
border: 1px solid red;
}
.container10 .item-1 {
grid-column: 1/2;
grid-row: 2/3;
}
.container10 .item-2 {
grid-column: 5/6;
grid-row: 2/3;
}
</style>
<h2>10.grid-auto-columns/grid-auto-rows</h2>
<p>
指定自动生成的网格轨道的大小
</p>
<div class="container10">
<div class="item item-1">111</div>
<div class="item item-2">222</div>
</div>
<style>
.container11 {
width: 400px;
height: 200px;
display: grid;
background-color: #F2F2F2;
grid-auto-columns: 60px 60px 60px 60px 60px;
/* 定义行单位的宽度 */
grid-template-rows: 60px 60px;
/* 定义高单位的宽度 */
}
.container11-1 {
grid-auto-flow: column;
}
.container11-2 {
grid-auto-flow: row;
}
.container11-3 {
grid-auto-flow: dense;
}
.container11 .item {
border: 1px solid red;
box-sizing: border-box;
}
.container11 .item-1 {
grid-column: 1;
grid-row: 1 / 3;
}
.container11 .item-5 {
grid-column: 5;
grid-row: 1 / 3;
}
</style>
<h2>11.grid-auto-flow</h2>
<p>
如果没有指定放置位置,放置算法会自动放置这些项目
</p>
<p>
row: 一次填充每行,根据需要添加新行
</p>
<div class="container11 container11-1">
<div class="item item-1">111</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">444</div>
<div class="item item-5">555</div>
</div>
<p>
column: 一次填充每列,根据粗腰添加新列
</p>
<div class="container11 container11-2">
<div class="item item-1">111</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">444</div>
<div class="item item-5">555</div>
</div>
<p>
dense: 后面出现比较小的item,则尝试在网格中填充
</p>
<div class="container11 container11-3">
<div class="item item-1">111</div>
<div class="item item-2">222</div>
<div class="item item-3">333</div>
<div class="item item-4">444</div>
<div class="item item-5">555</div>
</div>
<style>
.container12 {
width: 240px;
height: 240px;
display: grid;
background-color: #F2F2F2;
grid-template-columns: 60px 60px 60px 60px;
grid-template-rows: 60px 60px 60px 60px;
}
.container12 .item {
border: 1px solid red;
box-sizing: border-box;
}
.container12 .item-1 {
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
}
</style>
<h2>12.grid-column-start/grid-column-end/grid-row-start/grid-row-end</h2>
<p>
定义item的具体位置(水平开始/水平结束/垂直开始/垂直结束)
</p>
<div class="container12">
<div class="item item-1">111</div>
</div>
<style>
.container13 {
width: 240px;
height: 240px;
display: grid;
background-color: #F2F2F2;
grid-template-columns: 60px 60px 60px 60px;
grid-template-rows: 60px 60px 60px 60px;
}
.container13 .item {
border: 1px solid red;
box-sizing: border-box;
}
.container13 .item-1 {
grid-column: 2;
grid-row: 2;
}
</style>
<h2>13.grid-column/grid-row: grid-column-start/grid-column-end/grid-row-start/grid-row-end简写</h2>
<p>
定义item的具体位置(水平开始/水平结束/垂直开始/垂直结束)
</p>
<div class="container13">
<div class="item item-1">111</div>
</div>
<style>
.container14 {
width: 240px;
height: 240px;
display: grid;
background-color: #F2F2F2;
grid-template-columns: 60px 60px 60px 60px;
grid-template-rows: 60px 60px 60px 60px;
}
.container14 .item {
border: 1px solid red;
box-sizing: border-box;
}
.container14 .item-1 {
grid-area: 2;
}
</style>
<h2>14.grid-area: grid-column/grid-row简写</h2>
<p>
定义item的具体位置(水平开始/水平结束/垂直开始/垂直结束)
</p>
<div class="container14">
<div class="item item-1">111</div>
</div>
<style>
.container15 {
width: 240px;
height: 240px;
display: grid;
background-color: #F2F2F2;
grid-template-columns: 60px 60px 60px 60px;
grid-template-rows: 60px 60px 60px 60px;
}
.container15 .item {
border: 1px solid red;
box-sizing: border-box;
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
}
.container15-1 .item-1 {
justify-self: start;
}
.container15-2 .item-1 {
justify-self: end;
}
}
.container15-3 .item-1 {
justify-self: center;
}
.container15-4 .item-1 {
justify-self: stretch;
}
</style>
<h2>15.justify-self</h2>
<p>
item内容水平对齐方式
</p>
<p>start: item内容水平右对齐</p>
<div class="container15 container15-1">
<div class="item item-1">111</div>
</div>
<p>end: item内容水平右对齐</p>
<div class="container15 container15-2">
<div class="item item-1">111</div>
</div>
<p>center: item内容水平左对齐</p>
<div class="container15 container15-3">
<div class="item item-1">111</div>
</div>
<p>stretch: item内容水平居中对齐</p>
<div class="container15 container15-4">
<div class="item item-1">111</div>
</div>
<style>
.container16 {
width: 240px;
height: 240px;
display: grid;
background-color: #F2F2F2;
grid-template-columns: 60px 60px 60px 60px;
grid-template-rows: 60px 60px 60px 60px;
}
.container16 .item {
border: 1px solid red;
box-sizing: border-box;
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
}
.container16-1 .item-1 {
align-self: start;
}
.container16-2 .item-1 {
align-self: end;
}
}
.container16-3 .item-1 {
align-self: center;
}
.container16-4 .item-1 {
align-self: stretch;
}
</style>
<h2>16.align-self</h2>
<p>
item内容垂直对齐方式
</p>
<p>start: item内容垂直右对齐</p>
<div class="container16 container16-1">
<div class="item item-1">111</div>
</div>
<p>end: item内容垂直右对齐</p>
<div class="container16 container16-2">
<div class="item item-1">111</div>
</div>
<p>center: item内容垂直左对齐</p>
<div class="container16 container16-3">
<div class="item item-1">111</div>
</div>
<p>stretch: item内容垂直居中对齐</p>
<div class="container16 container16-4">
<div class="item item-1">111</div>
</div>
