.container {
??display: grid; ???
???grid-template-columns: repeat(12, 1fr);
???grid-template-rows: 50px 350px 50px;
???grid-gap: 5px;
???grid-template-areas:
???????"h h h h h h h h h h h h"
???????"m m m m ?m m ?c c c c c c"
???????"f f f f f f f f f f f f";
???????
}
@media ?screen and (max-width: 640px) {
.container {
???display: grid; ???
???grid-template-columns: repeat(12, 1fr);
???grid-template-rows: 50px 350px 50px;
???grid-gap: 5px;
???grid-template-areas:
???????"h h h h h h h m m m m m"
???????"c c c c c c c c c c c c"
???????"f f f f f f f f f f f f";
???????
}
}
.header {
???grid-area: h;
???background-color: red;
}
.menu {
???grid-area: m;
???background-color: royalblue;
}
.content {
???grid-area: c;
???background-color: turquoise;
}
.footer {
??grid-area: f;
??background-color: indianred;
}
css3 网格布局
原文地址：http://www.cnblogs.com/xbzy/p/7994174.html