css如何实现n宫格布局,详解css实现n宫格布局的方法

.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;

}

}

}

}