CSS样式请在这里查看:链接入口
CSS网格
CSS网格布局提供了带有行和列的基于网格的布局系统,可以让网页设计变得更加容易,而且不需要使用浮动和定位。
网格元素
网格布局通常由一个父级元素和多个子级元素组成,通常的形式为:
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
display 属性
当HTML元素的display 属性被设置为grid 或者inline-grid 时,它就会成为网格容器。
.grid-container:{
display:grid;/*或者设置为inline-grid*/
}
grid 是块级网格元素,设置为inline-grid 会成为行内网格元素。一个不同是会不会延伸至整个行。
网格容器的所有直接子元素将自动转化为网格项目。
间隙
- 网格列: 网格项的垂直线被称为列。
- 网格行: 网格项的水平线被称为行。
- 网格间隙: 每列或者行之间的间隔被称为间隙。
- 可以通过这些属性之一来调整间隙大小:
- grid-column-gap
- grid-row-gap
- grid-gap
- 可以通过这些属性之一来调整间隙大小:
举个栗子:
grid-column-gap
.grid-container {
display: grid;
grid-column-gap: 50px;
background-color:black;
color:cyan;
grid-template-columns: auto auto auto;
text-align:center;
}
.grid-item{
border:2px inset tomato;
}
grid-row-gap
.grid-container {
display: grid;
grid-row-gap: 50px;
background-color:black;
color:cyan;
grid-template-columns: auto auto auto;
text-align:center;
}
.grid-item{
border:2px inset tomato;
}
grid-gap (是上面两个属性的简写属性)
.grid-container {
display: grid;
grid-gap: 50px 60px;
background-color:black;
color:cyan;
grid-template-columns: auto auto auto;
text-align:center;
}
.grid-item{
border:2px inset tomato;
}
如果只设置一个值,则表示将两个简写都设置为这个值:
grid-gap:50px;
网格行
列之间的线称为列线
行之间的线称为行线
当放置网格项目时,可以引用行号:
比如说放在列线1和列线3之间:
.item1{
grid-column-start:1;
grid-column-end:3;
}
比如说放在行线1到行线4之间:
.item1{
grid-row-start:1;
grid-row-end:4;
}
grid-template-columns
grid-template-columns 属性定义网格布局中的列数,并且可以定义每列的宽度。
希望定义几列,可以设置几个宽度值,如果希望每列宽度都相同,可以都设置为auto。
grid-template-columns: 100px 150px 200px 250px;
如果有多于列数个网格项目,会自动创建新行。
grid-template-rows
与上个属性用法相同。
grid-template-rows: 100px 250px;
grid-template-columns:auto auto auto;
justify-content
justify-content属性用于在容器内对齐整个网格。
只有在网格总宽度小于容器宽度才有效。
space-evenly :
在列之间以及列周围留出相等的空间。
space-around :
在列周围留出相等的空间
space-between :
在列之间留出相等的空间
center :
在容器中间对齐网格
start :
在容器开头对齐网格
end :
在容器末端对齐网格
align-content
align-content属性用于垂直对齐容器内的整个网格
网格的总高度要小于容器高才能生效。
center :
space-evenly :
space-around :
space-between :
start :
end :
子元素(项目)
网格容器包含项目,默认情况下,网格容器的每一列的,每一行都有一个网格项目。
grid-column
grid-column 属性定义将项目放在哪一列上。
可以定义开始和结束位置。是grid-column-start 和 grid-column-end 两个属性的简写属性。
.item1{
grid-column:2/4;
}
grid-row
用法同grid-column
.item1{
grid-row:2/4;
}
也可以引用关键字span
.item1 {
grid-row: 2 / span 3;
}
这个例子表示从第二行开始,跨过3行。
grid-area
grid-area 属性是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。
.item1 {
grid-area: 2 / 2 / 3 / 4;
}
上例表示在二行二列开始到三行四列结束:
也可以使用关键字span
.item1 {
grid-area: 2 / 2 /span 3 /span 4;
}
表示在二行二列开始,跨过三行四列:
命名网格项目
grid-area 属性也可以用于为网格项目分配名称。
然后使用网格容器的grid-template-areas 属性来引用网格项目。
.item1 {
grid-area: a1;
}
.grid-container {
grid-template-areas: 'a1 a1 a1 a1 a1';
}
item1 的名称是 “myArea”,并跨越五列网格布局中的所有五列;
每一行由符号’ ' 来表示定义,句号用来表示没有名称的网格项目。
.item1 {
grid-area: a1;
}
.grid-container {
grid-template-areas: 'a1 a1 a1 . .';
}
可以定义多行:
.item1{
grid-area:a1;
}
.item2{
grid-area:a2;
}
.grid-container {
grid-template-areas: 'a2 a2 a2 . .' 'a2 a2 a2 a1 a1';
}
为所有项目命名之后便可以创作一张可用的模板:
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
}
项目的顺序
为每个.item 类设置grid-area 属性值可以自定义每个网格项目的顺序。
也可以使用媒体查询为不同的屏幕尺寸设置不同的排列方式。
.item1 { grid-area: 1 / span 3 / 2 / 4; }
.item2 { grid-area: 3 / 3 / 4 / 4; }
.item3 { grid-area: 2 / 1 / 3 / 2; }
.item4 { grid-area: 2 / 2 / span 2 / 3; }
.item5 { grid-area: 3 / 1 / 4 / 2; }
.item6 { grid-area: 2 / 3 / 3 / 4; }