html 布局兼容,CSS3 网格布局演示和兼容性说明

CSS

语言：

CSSSCSS

确定

@import "https://fonts.googleapis.com/css?family=Dosis:400,700";

main {

padding: 0;

}

@supports (display: grid) {

main {

display: grid;

grid-template-columns: 35% 1fr 200px;

grid-template-rows: 100px 300px 100px 50px 150px;

grid-gap: 3px;

}

}

div:nth-of-type(1) {

background: #4bfed5;

}

div:nth-of-type(2) {

background: #61e8c9;

}

div:nth-of-type(3) {

background: #78d1bd;

}

div:nth-of-type(4) {

background: #8ebbb1;

}

div:nth-of-type(5) {

background: #a5a5a5;

}

div:nth-of-type(6) {

background: #bb8e98;

}

div:nth-of-type(7) {

background: #d1788c;

}

div:nth-of-type(8) {

background: #e86180;

}

div:nth-of-type(9) {

background: #fe4b74;

}

div:first-of-type {

grid-column: 1 / 2;

grid-row: 1 / 4;

}

div:nth-of-type(2) {

grid-column: 2 / 4;

grid-row: 1 / 1;

}

div:nth-of-type(5) {

grid-column: 1 / 4;

grid-row: 3 / 3;

background-color: #FCD036;

opacity: .6;

}

div:nth-of-type(9) {

grid-column: 1 / 4;

}

body {

background: #3e3e3e;

font-family: 'Dosis', serif;

}

.page-title {

font-size: 1.5rem;

margin: 1rem 0 0;

}

.intro {

font-weight: 700;

}

p {

font-size: 1rem;

font-weight: 400;

margin: .5rem 0 1.5rem;

}

a {

color: #C44D58;

font-family: 'Dosis', serif;

font-weight: 700;

}

div {

font-weight: 700;

box-sizing: border-box;

padding: 1rem;

}