博客

前言

有没有小伙伴有遇到过对样式追求极致的产品啊===

为了这页面的样式我也是没少下功夫，总结了这几个多宫格小方法，

以后再也不怕多宫格自适应问题了，尤其是不确定个数的多宫格！话不多说，展示才艺吧～

方法

1.flex布局 盒子宽度自适应 多宫格中间距离不变

写法一：

优点

：

1. 确定列数 不确定宽度 宽度可以自适应
2. 距离两端距离是确定的，盒子与盒子的距离也是确定的

缺点

：

1. 对于多宫格计算公式不通用 需要举一反三
2. 一行四个的话计算公式是这样 不是四个的话公式就需要改变了

公式的话大家画个图应该就清晰明了啦，有什么问题可以在评论区留言讨论～

一行四个卡片加间隙总宽度是100% 一个卡片宽度是24%

总共有三个间隙

那么一个间隙大小 = （100%-24%*3）/ 3

<div className="container"> 
    <div className="item"></div> 
    <div className="item"></div> 
    <div className="item"></div> 
    <div className="item"></div> 
    <div className="item"></div> 
    <div className="item"></div> 
    <div className="item"></div> 
</div>

.container { 
    max-width: 1000px; 
    margin:100px auto 0; 
    display: flex; flex-wrap:wrap ; 
 } 
.item { 
    width: 24%; 
    height:200px; 
    margin-top:15px; 
    background: linear-gradient(135deg,#81ffef,#f067b4); 
    /*除了一行中的最后一个 其他的都有一个margin-right 且大小随屏幕宽度自适应*/
    &:not(:nth-child(4n)) { 
        margin-right: calc(4% / 3); 
    } 
} 
@media (max-width: 750px) { 
    .container { 
        width:100%; 
        margin:50px auto 0; 
    } 
    .item { 
        width: 48%; 
        height:100px; 
        &:not(:nth-child(4n)) { 
            margin-right: calc(4% / 1); 
        } 
        &:nth-child(2n) { 
            margin-right: 0; 
        } 
    } 
}

写法二：

此方法与写法一实现效果一样 只是不同写法 哪个好理解用哪个就可

<div className="container"> 
    <div className="item"></div> 
    <div className="item"></div> 
    <div className="item"></div> 
    <div className="item"></div> 
    <div className="item"></div> 
    <div className="item"></div> 
    <div className="item"></div> 
</div>

.container { 
    width: 1000px; 
    margin:100px auto 0; 
    display: flex; 
    justify-content: 
    space-between; 
    flex-wrap: wrap;
 } 
.item { 
    width: 24%; 
    height: 200px; 
    background: linear-gradient(135deg,#81ffef,#f067b4); 
    margin-top: 15px; 
    &:last-child:nth-child(4n - 1) { 
        margin-right: calc(24% + 4% / 3); 
    } 
    &:last-child:nth-child(4n - 2) { 
        margin-right: calc(48% + 8% / 3); 
    }
} 
@media (max-width: 750px) { 
    .container { 
        width:100%; 
        margin:50px auto 0; 
    } 
    .item { 
        width: 48%; 
        height:100px; 
        &:not(:nth-child(4n)) { 
            margin-right: calc(4% / 1); 
        } 
        &:nth-child(2n) { 
            margin-right: 0; 
        } 
    } 
}

2.grid布局 盒子宽度固定 多宫格中间距离不变

优点

：

不确定列数 列数随宽度减小而减少

缺点

：

不是两端对齐 是居中对齐的 距离两端距离不确定

<div className="container"> 
    <div className="item"></div> 
    <div className="item"></div> 
    <div className="item"></div> 
    <div className="item"></div> 
    <div className="item"></div> 
    <div className="item"></div> 
    <div className="item"></div> 
</div>

.container { 
    max-width: 1000px; 
    margin:100px auto 0; 
    display: grid; 
    justify-content: center; 
    grid-template-columns: 
    repeat(auto-fill, 200px); 
    grid-gap: 15px; 
} 
.item {
    width: 200px; 
    height:200px; 
    background: linear-gradient(135deg,#81ffef,#f067b4); 
} 
@media (max-width: 750px) { 
    .container { 
        width:100%; 
        margin:50px auto 0; 
        grid-template-columns: repeat(auto-fill, 100px); 
    } 
    .item { 
        width: 100px; 
        height:100px; 
    } 
}

总结

这两个方法基本适合大多数场景，随项目需要可自行变通～

有什么更好的写法可以评论区交流