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地址
