13-grid网格布局
发表更新前端 / CSS8 分钟读完 (大约1260个字)

13-grid网格布局

CSSgrid网格布局

grid布局的含义

含义

grid布局，也被称之为网格布局，是将页面中的父元素划分成一个个小的格子，然后通过这些小
的格子进行合并来制作出各种不同的网站效果

触发网格

给父元素添加display属性，并且将取值设置成：grid/inline-grid．grid：代表的是块状网格，默
认独占一行，类似于块级元素.inline-grid：代表的是行内块网格，与行内块元素类似

触发网格的特点

划分行列之后才能将里面的区域进行划分，显示网格

grid网格和flex弹性盒，表格

和flex：

  • 相同点：都有容器和项目之分

  • 不同点：flex一维，grid二维

和表格：

  • 相同点：行列之分，能划分格子
  • 不同点：代码嵌套，表格需要代码嵌套

grid布局中的基础概念

grid容器：采用grid布局的父元素；
grid内容：显示项目的区域
grid项目：grid布局中每一个格子内部放置的
网格线：网格布局中的横向的纵线的线条
单元格：横纵线交汇的区域被称之为单元格
间距：网格与网格之间的距离被称为间距

grid布局中的容器属性

触发网格

1
2
3
4
//代表的是块状网格，默认独占一行，类似于块级元素
display:grid
代表的是行内块网格，与行内块元素类似
display:inline-grid

容器行列划分

  1. 取值为数值 grid-template-rows:100px 100px 100px
  2. 取值为百分比 grid-template-rows:20% 30% 50%
  3. 重复函数 grid-template-rows:repeat(3,20%)

重复函数

  1. 自动填充 grid-template-rows:repeat(auto-fill, 30%)
    自动填充
  2. auto自动 grid-template-rows:100px auto 100px
  3. fr片段划分 grid-template-rows:1fr 2fr 1fr
  4. minmax() grid-template-rows:200px 200px minmax(100px,200px)

minmax

调整间距

1
2
3
4
5
6
7
8
9
10
11
.box {
  /* 写法一：*/
  grid-row-gap: 20px;
  grid-column-gap: 30px;

  /* 写法二：*/
  grid-gap: 20px 30px;

  /* 写法三：*/
  gap: 20px 30px;
}

网格在容器中的对齐方式

水平方向对其属性：justify-content
垂直方向对其属性：align-content

justify-content:start

start

align-content:center

center

1
2
3
4
5
justify-centent:center
align-centent:center

//复合简写形式
place-centent：center center

center

注意：justify-content，align-content取值除了有star，end，center,这些取值之外还有对应的stretch,space-around，space-between，space-evenly等值
stretch：代表的是拉伸默认值：

`justify-content：stretch`

space-around:行列间距环绕：

`justify-content：space-around`

space-between:行列两端对对齐：

`justify-content：space-between`

space-evenly:行列间距平分：

`justify-content：space-evenly`

grid布局中的项目属性

添加项目

在容器中添加标签即为项目，项目会自动撑开显示在单元格内部，默认项目是从左向右排列

显示顺序

1
2
3
4
//横向显示
grid-auto-flow:row;
//纵向显示
grid-auto-flow:column;

项目对齐方式

1
2
3
4
5
6
.box {
    //水平对齐方式
  justify-items: center; //start，center，end三个位置可选
    //垂直对齐方式
  align-items: center; //start，center，end三个位置可选
}

justify-items: start;也是默认值

start

justify-items: center;这行代码代表的是，项目位于水平方向的中间位置

center

同理垂直方向对齐：

align-items: end;

end

复合属性对齐

1
2
3
place-items：水平对齐，垂直对齐

place-items：center，center；

合并单元格属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.header {
  /* 写法一：*/
  grid-column-start: 1;
  grid-column-end: 3;

  grid-row-start: 1;
  grid-row-end: 2;

  /* 写法二：*/
  grid-column: 1 / 3;
  grid-row: 1 / 2;

  /* 写法三：使用 span 关键字，表示跨越。表示项目的左边框距离右边框跨越 2 个网格。*/
  grid-column-start: span 2;

  /* 写法四：若跨度为 1，则可简写第二根网格线*/
  grid-row: 1/2; /* grid-row: 1; */
  grid-row: 3/4;
  background-position:; /* grid-row: 3; */
}

容器中区域定义

1
2
3
4
5
<div class="box">
  <div class="item a"></div>
  <div class="item b"></div>
  <div class="item c"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.box {
  width: 800px;
  height: 800px;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  align-content: center;
  justify-content: center;
  grid-gap: 10px;
  grid-template-areas:
    'a a a'
    '. b b'
    'c c c';
}
.item {
  border: 1px dashed #000;
}
.a {
  grid-area: a;
}
.b {
  grid-area: b;
}
.c {
  grid-area: c;
}

grid-area

项目属性

grid案例分析

grid小游戏

grid在线生成器

#
关注我

最新文章

分类

×