關於CSS Grid Layout的代碼解釋
阿新 • • 發佈:2018-09-27
auto min class 一個 高度 gap col 單元 第一個
.wrapper { display: grid; /*生成grid類型塊級網格*/ grid-template-columns: repeat(3, 1fr); /*設置顯示的列網格線,且重復3次1fr,成三列網格,fr可以自動根據網格容器的寬度來計算列的寬度*/ grid-gap: 10px; /*單元格之間有10px的間距*/ grid-auto-rows: minmax(100px, auto); /*設置隱式的行網格線,單元格寬度保持在最小100px,最大auto(即max-content最理想大小的值)之間*/ } .one { grid-column: 1 / 3;/*規定網格中每列的寬度,第一個數字為列的起始網格線的位置,第二個是線束網格線的位置*/ grid-row: 1; /*規定網格中每行的高度若為數字則表示x個單位*/ } .two { grid-column: 2 / 4; 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的代碼解釋