技術標籤：HTMLCSScsshtmlgrid

display: grid; 相關內容

區別於 flex; column 和 row 兩個方向進行設定; flex 只可以設定 column 單個方向

<!-- 均以此為示例 -->
<style type="text/css">
.wrapper {
	background: #333;
	display: grid;
}
.wrapper > div {
	padding: 1em;
}
</style>
<div class="wrapper"
 
>
  <div class="inner1">inner1</div>
  <div class="inner2">inner2</div>
  <div class="inner3">inner3</div>
  <div class="inner4">inner4</div>
  <div class="inner5">inner5</div>
  <div class
 
="inner6">inner6</div>
</div>

外層容器-相關屬性

父元素(wrapper)

grid-auto-flow

• 佈局方向(預設值row)
• 引數: row/column(row dense/column dense)

grid-template-columns/grid-template-rows 和 grid-auto-columns/grid-auto-rows

• grid-template-columns

  • 可以定義單個和多個值;
  • 定義列數和列寬;

• grid-template-rows

  • 可以定義單個和多個值;
  • 對應的行號符合對應的引數位的設定;
  • 如果內容總行數超過定義的個數, 那就自動為 auto;

• grid-auto-columns

  • 只有一個引數
  • 只需要設定列寬, 自動計算列的列數

• grid-auto-rows

  • 只有一個引數
  • 只需要設定行高, 自動計算列的行數;

示例:

1. template 使用

.wrapper {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: minmax(100px, 200px); /* 只定義一個值,那麼第一行符合這個規則,其他行則為auto */
}

2. 混合-情況1[常用]

.wrapper {
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: minmax(100px, 200px); /* 每一行都符合這個規則 */
}

3. 混合-情況2
   • 未定義 flow 情況下: 相當於定義每列寬度和對應行號符合對應規則;
   • 定義 grid-auto-flow: column; 後: 按行進行填充, 行數填滿後填列;

.wrapper {
	grid-auto-columns: 200px;
	/* 定義了兩行 */
	/* grid-auto-flow: row 時: 前兩行均為200px, 後邊的行為auto */
	/* grid-auto-flow: column 時: 內容只存在兩行, 然後列填充 */
	grid-template-rows: minmax(100px, 200px) 200px;
}

4. auto 使用
   • 未定義 flow 情況下: 相當於只是定義了子標籤的一個寬高; (圖1)
   • 定義 grid-auto-flow: column; 後: 只是更改佈局, 所有子標籤均在一行顯示; (圖2)

.wrapper {
	/* grid-auto-flow: column; */
	grid-auto-columns: 200px; /* 每一列都符合這個規則 */
	grid-auto-rows: minmax(100px, 200px); /* 每一行都符合這個規則 */
}

• 圖1
  
• 圖2
  

gap 間距

grid-gap & grid-row-gap & grid-column-gap

items 相關

align-items & justify-items & place-items

1. 說明: 修改單個專案(相當於 inner1 或 其他 子標籤)的定位;
2. 引數:
   • stretch: 預設值; 鋪滿
   • start: 上/前
   • center: 中
   • end: 下/後
3. 舉例:

.wrappper {
	align-items: center;
	justify-items: center;

	/* 等同於 */
	place-items: center;
}

content 相關

align-content & justify-content & place-content

1. 說明: 修改整個內容(整個 wrapper 內容)的定位;

2. 引數

   • stretch: 預設值; 鋪滿
   • start: 上/前
   • center: 中
   • end: 下/後
   • space-around: 每個元素周圍分配相同的空間(間隔等於相鄰兩個元素的空間的和)
   • space-between: 首元素放在起點;

   末元素放在結尾

   • space-evenly: 每個元素之間的間隔相等

3. 示例:

.wrapper {
	align-content: center;
	justify-content: center;

	/* 等同於 */
	place-conent: center;
}

內層元素-相關屬性

子元素(inner)

起始-佔位

grid-row[grid-row-start/grid-row-end] & grid-column[grid-column-start/grid-column-end]

示例:

.inner1 {
	grid-row: 2 / 4; /* 表示從高度是第2橫線到第4橫線;其他內容自動排版 */
}

self

align-self + justify-self = place-self

.inner2 {
	align-self: center;
	justify-self: center;

	/* 等同於 */
	place-self: center;
}