1. 程式人生 > >關於CSS Grid Layout的代碼解釋

關於CSS Grid Layout的代碼解釋

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的代碼解釋