grid布局

相关基础参考

1 grid应用1

重点代码

// html
<div class="wrapper">
    <header>header</header>
    <div class="content">
        <nav>nav</nav>
        <div class="main">
            <div class="item">item</div>
            <div class="item">item</div>
            <div class="item">item</div>
            <div class="item">item</div>
            <div class="item">item</div>
            <div class="item">item</div>
            <div class="item">item</div>
        </div>
        <aside>aside</aside>
    </div>
    <footer>footer</footer>
</div>

// css
.content .main{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
            justify-items: center;
            align-items: center;
            flex: 1;
            border: 1px solid #ddd;
            border-top:0;
            border-bottom: 0;
        }
        .item{
            width: 150px;
            height: 150px;
            background: #abcdef;
        }
        .content aside{
            flex: 0 0 100px;
        }
        @media screen and (max-width: 900px){
            .content .main {
                grid-template-columns: 1fr 1fr 1fr 1fr;
            }
        }
        @media screen and (max-width: 800px){
            .content .main {
                grid-template-columns: 1fr 1fr 1fr;
            }
        }

效果：当浏览器够宽是一行展示5个item，当浏览器小于等于900px时，展示4个item，当浏览器小于800px时，展示3个item
具体代码github地址