grid布局属性:
创建一个grid容器:
display:grid;
grid-template:
grid-template
是grid-template-rows
,grid-template-columns
和grid-template-areas
属性的缩写。
grid-template: <grid-template-rows> / <grid-template-columns>;
grid-template-columns:20% 30% 30% 20%; //列相关宽度
grid-template-rows:40% 60%; //行相关高度
grid-template-columns:100px auto; auto是剩余宽度
grid-template-rows:repeat(2,100px); repeat是重复,参数1代表个数;
fr 单位允许你将一个轨道大小设置为网格容器内自由空间的一小部分。如下所示,每个网格项就会占据网格容器宽度的三分之一:
grid-template-columns: 1fr 1fr 1fr 50px; //这里自由空间表示除去非弹性项以后剩余的空间。在此示例中的 fr 单位的可用空间表示减去50px以后的空间大小:
grid-column-gap和grid-row-gap:指定网格线的大小。你可以把它想像成在行/列之间设置间距宽度。
grid-column-gap: 10px;
grid-row-gap: 15px;
简写: grid-gap: 10px 15px;
justify-items
沿列轴对齐网格项中的内容(相反于align-item属性定义的沿行轴对齐)。此值适用于容器内所有的网格项。
start: 内容与网格区域的左端对齐
end: 内容与网格区域的右端对齐
center: 内容处于网格区域的中间位置
stretch: 内容宽度占据整个网格区域空间(默认值)
这也可以使用justify-self属性对各个子网格项进行设置。
justify-self:center;
align-items
沿行轴对齐网格项中的内容(相反于justify-item属性定义的沿列轴对齐)。此值适用于容器内所有的网格项。
start: 内容与网格区域的顶端对齐
end: 内容与网格区域的底部对齐
center: 内容处于网格区域的中间位置
stretch: 内容高度占据整个网格区域空间(默认值)
这也可以使用align-self属性对各个网格项进行设置。
align-self:center;
place-items: center center; 这个属性是justify-content/align-items的简写,第一个值是align-items,第二个值是justify-content;
justify-content
当你使用px这种非响应式的单位对你的网格项进行大小设置时,就有可能出现一种情况--你的网格大小可能小于其网格容器的大小。在这种情况下,你就可以设置网格容器内网格的对齐方式。此属性会将网格沿列轴进行对齐(相反于align-content属性定义的沿行轴对齐)。
align-content
当你使用px这种非响应式的单位对你的网格项进行大小设置时,就有可能出现一种情况--你的网格大小可能小于其网格容器的大小。在这种情况下,你就可以设置网格容器内网格的对齐方式。此属性会将网格沿行轴进行对齐(相反于justify-content属性定义的沿列轴对齐)。
start: 网格与网格容器的左端对齐
end: 网格与网格容器的右端对齐
center: 网格处于网格容器的中间
stretch: 调整网格项的大小,使其宽度填充整个网格容器
space-around: 在网格项之间设置偶数个空格间隙,其最边缘间隙大小为中间空格间隙大小的一半
space-between: 在网格项之间设置偶数个空格间隙,其最边缘不存在空格间隙
space-evenly: 在网格项之间设置偶数个空格间隙,同样适用于最边缘区域
place-content:center center; (place-content
是设置 align-content
和 justify-content
的简写形式。)
父元素的终极简写:
grid是下面所有这些CSS属性的缩写集合:grid-template-rows
,grid-template-columns
,grid-template-areas
,grid-auto-rows
,grid-auto-columns
和grid-auto-flow
grid子元素相关属性:
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
表示纵向走第二列开始到第三列结束,横向走第一行开始到第三行结束的区间范围
grid-column和grid-row
grid-column和grid-row都是缩写,前者是grid-column-start / grid-column-end的缩写,后者是
grid-row-start / grid-row-end的缩写。
例如:
grid-column: 2 /4;
grid-row: 1 /3;
简写:
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
如上可写成:grid-area:1/2/3/4;
justify-self
表示单个网格元素的水平对齐方式。语法如下:
.item {
justify-self: stretch | start | end | center;
}
其中(假设文档流方向没有变):
stretch
默认值,拉伸。表现为水平填充。
start
表现为网格水平尺寸收缩为内容大小,同时沿着网格线左侧对齐显示。
end
表现为网格水平尺寸收缩为内容大小,同时沿着网格线右侧对齐显示。
center
表现为网格水平尺寸收缩为内容大小,同时在当前网格区域内部水平居中对齐显示。
align-self
指定了网格元素的垂直呈现方式,是垂直拉伸显示,还是上中下对齐,语法如下:
.container {
align-self: stretch | start | end | center;
}
其中(假设文档流方向为网页默认):
stretch
默认值,拉伸。表现为垂直填充。
start
表现为网格垂直尺寸收缩为内容大小,同时沿着上网格线对齐显示。
end
表现为网格垂直尺寸收缩为内容大小,同时沿着下网格线对齐显示。
center
表现为网格垂直尺寸收缩为内容大小,同时在当前网格区域内部垂直居中对齐显示。
place-self
可以让align-self
和justify-self
属性写在单个声明中。语法如下:
.container {
place-self: <align-self> <justify-self>;
}
例如:
place-self:center center;
总结:
父元素简写:
grid-template: <grid-template-rows> / <grid-template-columns>;
grid-gap: <grid-row-gap> <grid-column-gap>;
place-items: <align-items> / <justify-items>;
place-content: <align-content> / <justify-content>;
grid:grid-template-rowsgrid-template-columnsgrid-template-areasgrid-auto-rowsgrid-auto-columnsgrid-auto-flow;
子元素简写:
grid-column:开始位置 /结束位置;
grid-row:开始位置 /结束位置;
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
place-self:<align-self> / <justify-self>;