1. 程式人生 > >css 中的grid布局基礎

css 中的grid布局基礎

放置 pan 用戶界面 lang adding ocs start 設置 一個

CSS Grid LayoutCSS引入了一個二維網格系統。網格可用於布局主要頁面區域或小型用戶界面元素。

網格是一組交叉的水平和垂直線 - 一組定義列,其他行。元素可以放在網格上,以行或者列為標準。

grid布局的優點:

1:固定和靈活的軌道尺寸

2:可以使用行號,名稱或通過定位網格區域將項目放置在網格上的精確位置。網格還包含一種算法,用於控制未在網格上顯示位置的項目的放置。

3:在需要時添加其他行和列

4:網格包含對齊功能,以便我們可以控制項目放置到網格區域後的對齊方式,以及整個網格的對齊方式。

5:可以將多個項目放入網格單元格或區域中,它們可以彼此部分重疊。然後可以用z-index屬性

控制該分層

父元素必須設置display為grid或inline-grid

父元素grid屬性:

  1. grid-template-columns(row):設置網格的列(行),每一個值就代表創建那行(列)的列(行)寬
  2. fr:代表容器的可用空間,等份的分成對應份數。
  3. minmax():設置創建網格的最大值或最小值,此函數接受兩個參數,第一個參數定義最小值,第二個值為最大值,auto值允許尺寸拉伸,
  4. repeat():創建重復的軌道,此函數接受兩個參數,第一個參數定義網格軌道應該重復的次數,第二個參數定義每個軌道的尺寸。
  5. grid-column(row)-gap:設置列與列(行與行)之間的間距

grid子元素的屬性:

  1. grid-column-start/grid-column-end:設置列線的開始和結束位置
  2. grid-row:是grid-row-start和grid-row-end的簡寫,當設置為一個值時,代表列的開始位置,
  3. grid-column:當設置為一個值時,代表行的開始位置,
  4. span:span後面緊隨數字,表示合並多少個列或行
  5. grid-area:四個值,第一個值對應grid-row-start,第二個值對應grid-column-start,第三個值對應grid-row-end,第四個值對應grid-column-end 分別代表行列開始,行列結束。
<!DOCTYPE html
> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> *{ padding: 0; margin: 0; } .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; grid-auto-rows: minmax(100px, auto); } .wrapper div{ background-color: aquamarine; } .one { grid-column: 1 / 3; grid-row: 1; } .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; } </style> <body> <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> </body> </html>

css 中的grid布局基礎