CSS的Grid Layout系统

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

确实挺厉害的,和wpf里的Grid.row and column的思路是一样的,不过有很多特色,如repeat, flexible unit。我修改了一下它的示例css文件(html不变),用不同的颜色让它们更明显区别:

.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(50px, auto);
}
.one {
grid-column: 1 / 2;
grid-row: 1;
background-color: yellow;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
background-color: red;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
background-color: blue;
}
.four {
grid-column: 3;
grid-row: 3;
background-color: yellow;
}
.five {
grid-column: 2;
grid-row: 4;
background-color: green;
}
.six {
grid-column: 3;
grid-row: 4;
background-color: grey;
}