css:grid layout分析
HTML:
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
CSS:
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);/*表示平均分3列*/
/*網絡模板列，repeat表示可重復片段，允許以緊湊的形式寫入顯示重復的大量列，fr單位被用於在一系列長度值中分配剩余空間，如果多個已指定了多個部分，則剩下的空間根據各自的數字按比例分配*/
grid-gap: 10px;/*網格間隙為10像素*/
grid-auto-rows: minmax(100px, auto);/*每行最小100像素，最大自動*/
/*網絡自動行，minmax（min,max）是一種功能符號，用於定義大於或等於min且小於max的大小範圍*/
}
.one {
grid-column: 1 / 3;
/*grid-column表示占用列的空間:從第1列那裏開始,到第3列前面*/
grid-row: 1;
/*grid-row 表示占用行的空間：在第1行的位置*/
}
.two {
grid-column: 2 / 4;
/*grid-column表示占用列的空間:從第2列那裏開始,到第4列前面*/
grid-row: 1 / 3;
/*grid-row 表示占用行的空間：從第1行的位置開始，到第3行前面*/
}
/*後面依次類推，都是這樣*/
.three {
grid-column: 1;
grid-row: 2 / 5;
}
.four {
grid-column: 3;
grid-row: 3;
}
.five {
grid-column: 2;
grid-row: 4;
}
.six {
grid-column: 3;
grid-row: 4;
}
css:grid layout分析