css3 网格布局

.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;
}

转载于:https://www.cnblogs.com/xbzy/p/7994174.html