<html>
<head>
<meta charset="utf-8">
<title>CSS3----grid布局知识点</title>
<meta name="keyword" content="CSS3----grid布局知识点">
<meta name="discription" content="CSS3----grid布局知识点">
</head>
<body>
重要概念:
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: 垂直填充
</body>
</html>