flex和grid实现响应式九宫格

最新推荐文章于 2024-08-16 14:53:15 发布

搬砖女孩

最新推荐文章于 2024-08-16 14:53:15 发布

阅读量305

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_45195136/article/details/109495330

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

响应式九宫格布局

flex

 .wrap {
            width: 100%;
            height: 0;
            position: relative;
            padding-bottom: 100%;
        }
        
        .inner {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: space-between;
        }
        
        li {
            width: calc(90% / 3);
            height: calc(90% / 3);
            background-color: blue;
        }

 <div class="wrap">
        <div class="inner">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </div>
    </div>

grid

 .wrap {
            width: 100%;
            height: 0;
            position: relative;
            padding-bottom: 100%;
        }
        
        .inner {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
           
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: repeat(3, 1fr);
            grid-gap: 2%;
            
        }
        
        li {
           
            background-color: blue;
        }