css如何实现n宫格布局

时间:2020-03-12  编辑:

设计思路(无关你是scss还是less)

1、为了方便内部元素水平/垂直居中, 整体我们用flex布局.

2、使用正方形占位, 因为用了padding-top:100%, 所以我们就需要再单独用一个div来装内容, 我给他起名"item__content".

3、为了让内容的容器div充满方块, 我们给他设置样式:position:absolute;top:0;left:0;right:0;bottom:0;;

(推荐教程:CSS

HTML代码

1

2

3

4

5

6

7

8

9

10

<!-- a-grid是一个flex容器, 方便他的内容做"水平/垂直居中" -->

<div class="a-grid">

  <!-- a-grid__item用来占位实现正方形 -->

  <div class="a-grid__item">

      <!-- item__content才是真正装内容的容器 -->

      <div class="item__content">

        内容...

      </div>

  </div>

</div>

CSS代码

为了不冗余, 我把公共的部分抽离的出来起名".a-grid";

mixin支持4个参数, 分别是$row(行数), $column(列数), $hasBorder(是否有边框), $isSquare(是否保证每个块是正方形).

mixin内部通过计算并结合:nth-child实现"整体无外边框"的效果

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

.a-grid {

    display: flex;

    flex-wrap: wrap;

    width: 100%;

  

    .a-grid__item {

        text-align:center;

        position:relative;

        >.item__content {

            display:flex

            flex-flow: column;

            align-items: center;

            justify-content: center;

        }

    }

}

  

@mixin grid($row:3, $column:3, $hasBorder:false, $isSquare:true) {

    @extend .a-grid;

  

    .a-grid__item {

  

        flex-basis: 100%/$column;

  

        @if($isSquare) {

            padding-bottom: 100%/$column;

            height: 0;

        }

  

        >.item__content {

  

            @if($isSquare) {

                position:absolute;

                top:0;left:0;right:0;bottom:0;

            }

        }

    }

  

    @for $index from 1 to (($row - 1) * $column + 1) {

        .a-grid__item:nth-child(#{$index}) {

            @if($hasBorder) {

                border-bottom: 1px solid #eee;

            }

        }

    }

  

    @for $index from 1 to $column {

        .a-grid__item:nth-child(#{$column}n + #{$index}) {

            @if($hasBorder) {

                border-right: 1px solid #eee;

            }

        }

    }

}

使用

1

2

3

4

5

6

7

8

9

// 生成一个 3行3列, 正方形格子的宫格

.a-grid-3-3 {

    @include grid(3, 3, true);

}

  

// 生成一个 2行5列, 无边框宫格, 每个格子由内容决定高度

.a-grid-2-5 {

    @include grid(2, 5, false, false);

}

提醒大家: 如要做n x m的布局, 用@include grid(n, m)后千万别忘了在html中添加 n x m个对应的dom结构。

以上就是css如何实现n宫格布局的详细内容,更多请关注php知识-学习天地 www.lxywzjs.com其它相关文章!

分享至:

分享到QQ空间 分享到朋友社区 新浪微博分享

SITE MAP

扫一扫,加微信
扫一扫,关注公众号