CSS Grid 網格佈局

Mr_F發表於2017-08-14
CSS

CSS Grid是一個強大的 web 二維佈局工具，能夠以行和列來進行佈局；

1. 網格容器

通過設定display的屬性為grid或inline-grid來建立網格容器；

display: grid
預設行排列，寬度為容器的寬度；

.container{
    display: grid;
    border: 1px dashed gray;
}複製程式碼

圖1-1.png
圖1-1.png

display: inline-grid 

.container{
    display: inline-grid;
    border: 1px dashed gray;
}複製程式碼

圖1-2.png
圖1-2.png

2.顯式網格

grid-template-rows：none | <track-list> | <auto-track-list>

grid-template-columns：none | <track-list> | <auto-track-list>

這兩個屬性差不多的，一個是行一個是列，我下面就以grid-template-columns來舉例子；
where
<track-list> = [ <line-names>? [ <track-size> | <track-repeat> ] ]+ <line-names>?
where
<auto-track-list> = [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>? <auto-repeat> [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?

grid-template-columns: <track-list> → <track-size>

where
<track-size>= <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )

2.1 示例：（<track-breadth>）
where
<track-breadth>= <length-percentage> | <flex> | min-content | max-content | auto
<flex>：css資料型別，表示網格容器內的靈活長度（如1fr,1.5fr）;

.container{
  display: grid;
  border: 1px dashed gray;
  grid-template-columns: 200px 1fr 1fr;
  //將容器分成3列，一列寬度為200px，然後將容器剩下的部分成2個部分,第二列和第三列各佔1個部分
}複製程式碼

圖2.1.png
圖2.1.png

2.2 示例：（minmax( <inflexible-breadth> , <track-breadth> )）
設定最小和最大的列寬度
where
<inflexible-breadth>= <length> | <percentage> | min-content | max-content | auto

.container{
  display: grid;
  border: 1px dashed gray;
  grid-template-columns: minmax(200px,1fr) 1fr;
  //將容器分成2列，第一列設定寬度最小為200px,最大為1fr
}複製程式碼

圖2-2(1).png (寬度最大1fr時)
圖2-2(1).png (寬度最大1fr時)

圖2-2(2).png (寬度最小200px時)
圖2-2(2).png (寬度最小200px時)

2.3 示例：（fit-content( [ <length> | <percentage> ] )）

<style type="text/css">
    .container {
      display: grid;
      grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
      grid-gap: 5px;
      width: 100%;
      background-color: #eee;
      padding: 10px;
    }
    .container > div {
      background-color: #ffc727;
      padding: 5px;
    }
</style>
<div class="container">
  <div>內容不足300px,適應內容的寬度</div>
  <div>
    我這裡內容比較多,超過300px了，但是我不能比設定的最大寬度300px更寬了。
  </div>
  <div>我就要剩下的了</div>
</div>複製程式碼

圖2-3.png
圖2-3.png

grid-template-columns: <track-list> → <track-repeat>

where
<track-repeat>= repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )

2.4 示例：(repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? ))
第一個引數：規定應重複的數量，也就是分成幾列；
第二個引數：規定分成的列的寬度；

.container{
  display: grid;
  border:1px dashed gray;
  grid-template-columns: repeat(3,1fr);
}複製程式碼

圖2-4.png
圖2-4.png

grid-template-columns: <auto-track-list>

where
<auto-track-list>= <fixed-list> <auto-repeat> <fixed-list>
where
<fixed-list>= [ <line-names>? [ <fixed-size> | <fixed-repeat> ] ]* <line-names>?
where
<auto-repeat>= repeat( [ auto-fill | auto-fit ] , [ <line-names>? <fixed-size> ]+ <line-names>? )

2.5 示例：（grid-template-columns: <auto-track-list>）

.container{
  display: grid;
  border:1px dashed gray;
  grid-template-columns: 1fr repeat(1, 100px) 2fr;
}複製程式碼

圖2-5.png
圖2-5.png

3.網格間隙

grid-gap:<'grid-row-gap'> <'grid-column-gap'>?

第一個引數：行的間隙
第二個引數：列的間隙
3.1 示例：

.container{
  display: grid;
  border:1px dashed gray;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px 20px;
}複製程式碼

圖3-1.png
圖3-1.png

4.通過網格線號定位

網格線本質上是表示列和行軌跡的開始，結束或之間的行。
從軌道開始和網格方向開始的每一行從1開始遞增編號。

如圖4-1.png，這個3x2網格可以生成4x3的網格線，裡面的1,2,3,4,5,6塊就根據這些網格線來進行定位；

圖4-1.png
圖4-1.png

grid-row：<grid-line> [ / <grid-line> ]?

where
<grid-line>= auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

grid-column：<grid-line> [ / <grid-line> ]?

where
<grid-line>= auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

4.1 示例：

.item {  
    grid-row:2 / 3; 
    //將元素放在行的第2條和第3條網格線之間
    //列也是差不多的
}複製程式碼

圖4-1.png
圖4-1.png

還可以實現跨行或列

.item{
    grid-column: 1 / 3;
}複製程式碼

圖4-2.png
圖4-2.png

還可以使用span來實現跨行或列

.container{
    display: grid;
    border: 1px dashed gray;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px 20px;
    //asd
}
.item1{
    grid-column: 1/span 3;
    //列的第1條網格線開始，跨3列
}
.item2{
  grid-row: 2/span 3;
  grid-column: 2/span 2;
  //等價於 grid-area: 2/ 2 / span 3 / span 2
}複製程式碼
<div class="container">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>複製程式碼

圖4-3.png
圖4-3.png

5.隱式網格

使用grid-auto-rows, grid-auto-columns, grid-auto-flow來設定隱式網格；

  • grid-auto-rows：<track-size>+ 設定隱含建立的網格行的大小
  • grid-auto-columns：<track-size>+ 設定隱含建立的網格列的大小軌道
  • grid-auto-flow：<track-size>+ 設定隱含建立的網格的預設流方向
.container {
  display: grid;
  grid-gap:5px;
  grid-template-rows: 70px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 140px;
  grid-auto-flow: row;
}複製程式碼

圖5-1.png
圖5-1.png

CSS Grid
MDN
感謝您的閱讀

相關文章