html5网格布局模板,CSS3 网格布局模板区域（grid-template-areas）属性使用实例
CSS
语言：
CSSSCSS
确定
body {
width: 100vw;
height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
background: #eee;
}
.area {
display: grid;
width: calc(5 * 60px);
height: calc(5 * 60px);
padding: 60px;
border-radius: 50%;
box-shadow: 20px 20px 20px #bdbdbd;
background: white;
-webkit-transition: all 1s ease-out;
transition: all 1s ease-out;
grid-template-rows: repeat(5, 60px);
grid-template-columns: repeat(5, 60px);
grid-template-areas: ". g g g . " "o_ . . . . " "o . e e . " "o . . . l " ". g_ g_ g_ . ";
}
.area:hover {
-webkit-transform: translate(20px, 20px);
-ms-transform: translate(20px, 20px);
transform: translate(20px, 20px);
box-shadow: 0 0 0 #9e9e9e;
}
.g {
grid-area: g;
background: #ea4335;
}
.o_ {
grid-area: o_;
background: #ff9800;
}
.o {
grid-area: o;
background: #fbbc05;
}
.g_ {
grid-area: g_;
background: #34a853;
}
.l {
grid-area: l;
background: #00bcd4;
}
.e {
grid-area: e;
background: #4285f4;
}
.x {
grid-area: x;
background: #9e9e9e;
}