CSS网格

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;
}
1
2
3
4
5
6
7
8
9

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;
}
1
2
3
4
5
6
7
8
9

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;
}
1
2
3
4
5
6
7
8
9

如果只设置一个值,则表示将两个简写都设置为这个值:

grid-gap:50px;
1
2
3
4
5
6
7
8
9
网格行

列之间的线称为列线

行之间的线称为行线

lines

当放置网格项目时,可以引用行号:

比如说放在列线1和列线3之间:

.item1{
    grid-column-start:1;
    grid-column-end:3;
}
1
2
3
4
5
6
7
8
9

比如说放在行线1到行线4之间:

.item1{
    grid-row-start:1;
    grid-row-end:4;
}
1
2
3
4
5
6
7
8
9
grid-template-columns

grid-template-columns 属性定义网格布局中的列数,并且可以定义每列的宽度。

希望定义几列,可以设置几个宽度值,如果希望每列宽度都相同,可以都设置为auto。

grid-template-columns: 100px 150px 200px 250px;
1
2
3
4
5
6
7
8
9

如果有多于列数个网格项目,会自动创建新行。

grid-template-rows

与上个属性用法相同。

grid-template-rows: 100px 250px;
grid-template-columns:auto auto auto;
1
2
3
4
5
6
7
8
9
justify-content

justify-content属性用于在容器内对齐整个网格。

只有在网格总宽度小于容器宽度才有效。

原型:

1
2
3
4
5
6
7
8
9

space-evenly :

1
2
3
4
5
6
7
8
9

在列之间以及列周围留出相等的空间。

space-around :

1
2
3
4
5
6
7
8
9

在列周围留出相等的空间

space-between :

1
2
3
4
5
6
7
8
9

在列之间留出相等的空间

center :

1
2
3
4
5
6
7
8
9

在容器中间对齐网格

start :

1
2
3
4
5
6
7
8
9

在容器开头对齐网格

end :

1
2
3
4
5
6
7
8
9

在容器末端对齐网格

align-content

align-content属性用于垂直对齐容器内的整个网格

网格的总高度要小于容器高才能生效。

center :

1
2
3
4
5
6
7
8
9

space-evenly :

1
2
3
4
5
6
7
8
9

space-around :

1
2
3
4
5
6
7
8
9

space-between :

1
2
3
4
5
6
7
8
9

start :

1
2
3
4
5
6
7
8
9

end :

1
2
3
4
5
6
7
8
9
子元素(项目)

网格容器包含项目,默认情况下,网格容器的每一列的,每一行都有一个网格项目。

grid-column

grid-column 属性定义将项目放在哪一列上。

可以定义开始和结束位置。是grid-column-startgrid-column-end 两个属性的简写属性。

.item1{
    grid-column:2/4;
}
1
2
3
4
5
6
7
8
9
grid-row

用法同grid-column

.item1{
    grid-row:2/4;
}
1
2
3
4
5
6
7
8
9

也可以引用关键字span

.item1 {
  grid-row: 2 / span 3;
}

这个例子表示从第二行开始,跨过3行。

1
2
3
4
5
6
7
8
9
grid-area

grid-area 属性是 grid-row-startgrid-column-startgrid-row-endgrid-column-end 属性的简写属性。

.item1 {
  grid-area: 2 / 2 / 3 / 4;
}

上例表示在二行二列开始到三行四列结束:

1
2
3
4
5
6
7
8
9

也可以使用关键字span

.item1 {
  grid-area: 2 / 2 /span 3 /span 4;
}

表示在二行二列开始,跨过三行四列:

1
2
3
4
5
6
7
8
9
命名网格项目

grid-area 属性也可以用于为网格项目分配名称。

然后使用网格容器的grid-template-areas 属性来引用网格项目。

.item1 {
  grid-area: a1;
}
.grid-container {
  grid-template-areas: 'a1 a1 a1 a1 a1';
}

item1 的名称是 “myArea”,并跨越五列网格布局中的所有五列;

1
2
3
4
5
6
7
8
9

每一行由符号’ ' 来表示定义,句号用来表示没有名称的网格项目。

.item1 {
  grid-area: a1;
}
.grid-container {
  grid-template-areas: 'a1 a1 a1 . .';
}
1
2
3
4
5
6
7
8
9

可以定义多行:

.item1{
    grid-area:a1;
}
.item2{
    grid-area:a2;
}
.grid-container {
  grid-template-areas: 'a2 a2 a2 . .' 'a2 a2 a2 a1 a1';
} 
1
2
3
4
5
6
7
8
9

为所有项目命名之后便可以创作一张可用的模板:

.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';
} 
header
menu
main
right
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; }
1
2
3
4
5
6
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_南明_离火_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值