grid布局实现居中后最后一行左边对齐

缘夏520

已于 2022-09-01 17:34:11 修改

阅读量878

点赞数

分类专栏： js 文章标签： javascript 前端

于 2022-07-07 14:08:04 首次发布

本文链接：https://blog.csdn.net/qq_42584734/article/details/125658018

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

grid布局实现居中后最后一行左边对齐
自适应布局首先想到的是flex，但做这个样式网上也有不少方法，但都比较繁琐。最后一行用占位符等等。
最简单有效的方法就是grid布局了。
参考这位大佬的文章实现的
这咋突然还404了
在这里插入图片描述
那看这个吧

.reportList {
        // border: 1px #c91515 solid;
        display: grid;
        grid-template-columns: repeat(auto-fill, 270px);//自动填充，每个单元270
        grid-gap: 10px;//间距10
        justify-content: space-between;
        .reportUnit {
            width: 270px;
            height: 220px;
            margin: 5px;
            .reportUnit-inner:hover {
                // background: #f7f7f7;
                -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
                box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
                -webkit-transform: translate3d(0, 0px, -2px);
                transform: translate3d(0, 1px, -2px);
                color: #01a8f9;
            }
            .reportUnit-inner {
                margin: 0 auto;
                max-width: 260px;
                height: 210px;
                background-color: #fff;
                border-radius: 5px;

                img {
                    margin: 5% 0% 2% 8%;
                    width: 84%;
                    height: 140px;
                }

                .name {
                    margin-left: 8%;
                }

                .rate {
                    margin: 0% 8% 0% 8%;
                    display: flex;
                    justify-content: space-between;
                    color: #F7BA2A;
                }
            }
        }
    }