css
☘ 主页 > 网页 > css >

CSS3 grid布局的简单使用介绍

2024-06-04 | 佚名 | 点击：次

CSS3 grid 网格布局的使用

1.概述

如果你要做成以下的这种效果，你会怎么做？

你可以选择使用 absolute 绝对定位为这些块元素定位，也可以使用多个盒子嵌套来实现。

当然最简单的方法是使用 CSS3 grid网格布局。

grid 布局能够让我们更加灵活组织盒子的搭配方式。

2.一些概念

行和列的概念

容器和项目

1

2

3

4

5

<div>

   <span>1</span>

   <span>2</span>

   <span>3</span>

</div>

上面的 div 就是容器，三个 span 都是项目。

在一个网格布局中，如果有 2 × 2 的四个网格，那么就会有 3 × 3 的网格线，因为一个网格有两遍。

在 grid 布局中，我们可以使用 fr 关键字，它的意思是 fraction，即片段的意思，下面的代码意为着第二列和第三列的列宽是 1:2 的关系，并且 fr 可以与 px 一起混用。

1

2

3

4

.content {

    display:grid;

    grid-template-columns:100px 1fr 2fr

}

3.一些关键属性实现文章开始的效果

由最后的四个属性可以确定元素的位置。

其他的元素没有特殊的设置就会是按照文档流的顺序排列。

我们直接以最开始的例子来理解这些属性。

代码：

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

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

<template>

    // content 是容器 

    <div class="content">

        // 容器里面有四个项目

        <div class="itemOne"></div>

        <div class="itemTwo"></div>

        <div class="itemThree"></div>

        <div class="itemFour"></div>

    </div>

</template>

<script>

export default {

    name: 'App'

}

</script>

<style scoped>

.content {

    // 采用 grid 布局

    display: grid;

    // 有三列，对应的宽度是 100px 100px 200px

    // 注意：如果三个宽度都一样的话，可以写成 repeat(3,100px)

    grid-template-columns: 100px 100px 200px;

    // 有两行，两行的高度都是 200px

    grid-template-rows: repeat(2, 200px);

    // 行间距是 20px

    grid-row-gap: 20px;

    // 列间距是 20px

    grid-column-gap: 20px;

}

.content>div {

    // 给项目设置圆角

    border-radius: 10px;

    // 给项目设置变大的速度

    transition: all 0.5s;

    // 给项目设置阴影

    box-shadow: 2px 5px 12px #3B2E32;

}

.content>div:hover {

    // 鼠标放上去的时候，项目会放大 1.03 倍

    transform: scale(1.03);

}

// 注意下面所说的网格和网格线的区别， 3×3 的网格是有 4×4 的网格线的

.itemOne {

    background-color: #ef342a;

    // 项目一的列从第一个网格线开始

    grid-column-start: 1;

    // 项目一的列到第二个网格线结束

    grid-column-end: 2;

    background: url(https://picgo-use-images.oss-cn-shanghai.aliyuncs.com/images/PictureUnlock_s_295515_user0.pictureunlock.jpg) no-repeat center/cover;

}

.itemTwo {

    background-color: #f68f26;

    // 项目二的列从第二个网格线开始

    grid-column-start: 2;

     // 项目二的列到第三个网格线结束

    grid-column-end: 3;

    background: url(https://picgo-use-images.oss-cn-shanghai.aliyuncs.com/images/PictureUnlock_s_358187_user0.pictureunlock.jpg) no-repeat center/cover;

}

.itemThree {

    background-color: #4ba946;

     // 项目三的列从第三个网格线开始

    grid-column-start: 3;

     // 项目三的列到第四个网格线结束

    grid-column-end: 4;

    // 项目三的行从第一个网格线开始

    grid-row-start: 1;

    // 项目三的行到第三个网格线结束

    grid-row-end: 3;

    background: url(https://picgo-use-images.oss-cn-shanghai.aliyuncs.com/images/PictureUnlock_s_346323_user0.pictureunlock.jpg) no-repeat center/cover;

}

// 参照上面的注释理解

.itemFour {

    background-color: #0376c2;

    grid-column-start: 1;

    grid-column-end: 3;

    grid-row-start: 2;

    grid-row-end: 3;

    background: url(https://picgo-use-images.oss-cn-shanghai.aliyuncs.com/images/QQ截图20220717231533.png) no-repeat center/cover;

}

</style>

4.其他的一些属性

学会了以上的一些属性，就已经可以写出一定的效果了，至于每一个网格内，依然可以采用 flex 布局

其他的一些属性：

网格线可以设置名称

1

grid-template-columns：[line1] 100px [line2] 100px [line3] 100px [line4]

1

grid-template-columns：[line5] 100px [line5] 100px [line5] 100px [line8]

1

grid-column-start: c3;     grid-column-end: c4;

在使用过程中可以用网格线的名字代替索引

行间距 和 列间距 可以合在一起

1

grid-gap:20px 20px;

网格可以给每一个区域定义名字

1

2

3

4

5

6

display: grid;

grid-template-columns: 100px 100px 100px;

grid-template-rows: 100px 100px 100px;

grid-template-areas: 'a b c'

                      'd e f'

                      'g h i';

如果想要使几个部分合并的话，只需要起相同的名字即可。

1

2

3

grid-template-areas: 'a b c'

                     'b b c'

                     'c c c';

如果某一部分不需要，可以用 . 代替即可。

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

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

<template>

    <div class="content">

        <div class="itemOne"></div>

        <div class="itemTwo"></div>

        <div class="itemThree"></div>

        <div class="itemFour"></div>

        <img src="" alt="">

    </div>

</template>

<script>

export default {

    name: 'App',

}

</script>

<style scoped>

.content {

    display: grid;

    /* 1.设置 display 为 grid */

    width: 100vw;

    height: 100vh;

    grid-template-areas: "head head head"

        "nav nav nav"

        "foot main main";

    /* 2.区域划分 当前为 三行 三列 */

    grid-template-rows: 100px 100px 100px;

    /* 3.各区域 宽高设置 */

    grid-template-columns: 150px 150px 150px;

}

.itemOne {

    grid-area: head;

    /* 4. 指定当前元素所在的区域位置，从 grid-template-areas 选取值 */

    background-color: #8ca0ff;

}

.itemTwo {

    grid-area: nav;

    background-color: #ffa08c;

}

.itemThree {

    grid-area: main;

    background-color: #ffff64;

}

.itemFour {

    grid-area: foot;

    background-color: #8cffa0;

}

</style>

grid-auto-flow：默认的放置顺序是先行后列

原文链接：
相关文章
最新更新