Grid 佈局簡介

1、 簡介

下面代碼是該小節全部案例的 DOM 結構

<div className="container">
  {Array.from({ length: 9 }).map((v, index) => (
    <div className="project" key={index}>
      {index + 1}
    </div>
  ))}
</div>
複製代碼

1.1 概念

• 網格佈局 (Grid) 是一種強大的 CSS 佈局方案
• 它經過將容器劃分紅一個個網格, 並指定網格的大小、佈局、位置、層級實現基本佈局
• 它經過設置子項所佔的網格多少、位置、排列從而作出各類各樣的佈局

1.2 和 Flex 佈局的區別

1. Flexbox 是一種一維佈局、更適用於一行或者一列布局
2. Grid 是一種二維佈局、更適用於多行和多列布局
3. Grid 和 flexbox 的一個很大的差別是 Grid 容許咱們在二維空間(多行多列)控制元素的位置, flexbox 則不行。但這並不意味着你永遠不能在一維佈局中使用 Grid, 在須要準確地在一維空間控制元素的尺寸和位置時選擇咱們依然能夠選擇使用 Grid

2、 基本術語

2.1 容器、項目

Grid 佈局是經過 display: grid 在容器內創建網格格式化上下文, 容器內部子元素, 稱爲"項目", 須要注意的是項目只能是容器的頂層子元素, 不包含項目的子元素,

下面代碼: class = 'container' 就是容器, class = 'project' 就是項目

<style> .container { display: grid; } </style>
<div class="container">
  <div class="project"></div>
  <div class="project"></div>
  <div class="project"></div>
</div>
複製代碼

2.2 行、列

Grid 佈局是經過 display: grid 將容器劃分爲多個網格, 既然是網格那麼天然就有了行和列的概念, 如圖:

2.3 單元格

行和列的交叉區域, 稱爲 單元格 (cell) 。正常狀況下, n 行和 m 列會產生 n x m 個單元格, 如圖:

2.4 網格線

劃分網格的線, 被稱爲 網格線 (grid line) 。水平網格線劃分出行, 垂直網格線劃分出列。正常狀況下, n 行有 n + 1 根水平網格線, m 列有 m + 1 根垂直網格線, 如圖是一個 5 * 4 的單元格公產生 6 根垂直網格線 5 根水平網格線

2.5 網格區域

以網格線爲界可被劃分爲一塊塊區域, 可以使用 grid-template-areas 定義每一個單元格區域名稱

3、 容器屬性

3.1 display

1. display: grid 指定一個容器採用網格佈局, 默認容器爲塊級元素
2. display: inline-grid 指定一個容器採用網格佈局, 特別要注意的是容器將被設爲行內元素
3. 注意: 容器設置爲網格佈局後, 容器子元素 (項目) 的 float、display: inline-block、display: table-cell、vertical-align 和 column-* 等屬性將失效。

.container {
  display: grid;
}
複製代碼

3.2 劃分網格: grid-template-columns、grid-template-rows

這兩個屬性用於定於容器網格大小數量, grid-template-columns 屬性定義每一列的列寬、數量, grid-template-rows 屬性則定義每一行的行高、數量。

3.2.1 可取值: 非負值的長度大小

下面代碼指定了一個三行三列的網格, 列寬和行高都是 100px, 每一個子項默認從左向右進行排列而且佔滿一個網格。

.container {
  width: 300px;
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}
複製代碼

3.2.2 可取值: 非負值且相對於網格容器的百分比

下面代碼指定了一個三行三列的網格, 列寬和行高都是 33.33%, 每一個子項默認從左向右進行排列而且佔滿一個網格。

.container {
  width: 300px;
  height: 200px;
  display: grid;
  grid-template-rows: 33.33% 33.33% 33.33%;
  grid-template-columns: 33.33% 33.33% 33.33%;
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}
複製代碼

3.2.3 可取值: 非負值, 用單位 fr 來定義網格佔剩餘可分配空間的比例

下面代碼指定了一個三行三列的網格, 第三列寬度爲 100px, 第一列和第二列佔滿全部剩餘空間, 而且第二列寬度是第一列的兩倍。

.container {
  width: 300px;
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 1fr 2fr 100px;
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}
複製代碼

3.2.4 可取值: auto 自適應寬度

• 下面代碼指定了一個三行三列的網格, 第一列和第三列寬度各爲 50px, 第二列自適應(佔滿全部剩餘空間)

.container {
  width: 300px;
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 50px auto 50px;
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}
複製代碼

• 下面代碼指定了一個三行三列的網格, 第一列寬度爲 50px, 第二列和第三列自適應(等比例分配剩餘空間)

.container {
  width: 300px;
  display: grid;
  grid-template-rows: 100px 100px 100px;
  // 等價於: grid-template-columns: 50px 1fr 1fr;
  grid-template-columns: 50px auto auto;
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}
複製代碼

3.2.5 可取值: minmax(min, max) 定義大小範圍, 寬度大於等於 min 值, 而且小於等於 max 值

下面代碼指定了一個三行三列的網格, 第一列和第三列設置最小寬度 100px 最大寬度 1fr, 在容器寬度足夠大的狀況下列寬等比例縮放, 在容器寬度不足狀況下第一列和第三列將固定寬度 100px 第二列寬度自適應

.container {
  display: grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: minmax(100px, 1fr) 1fr minmax(100px, 1fr);
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}
複製代碼

3.2.6 可取值: repeat() 用於簡化重複值

• 下面代碼指定了一個三行三列的網格, grid-template-columns: repeat(3, 100px) 等價於 grid-template-columns: 100px 100px 100px

.container {
  width: 300px;
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 1fr);
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}
複製代碼

• 下面代碼使用 auto-fill 關鍵字, 該關鍵字表示自動填充全部剩餘空間, 下面代碼中 repeat(auto-fill, 100px) 將自動建立列(列寬 50px)並佔滿全部剩餘空間

.container {
  width: 300px;
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: 200px repeat(auto-fill, 50px);
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}
複製代碼

3.2.7 定義網格線名稱

在 grid-template-columns 屬性和grid-template-rows 屬性裏面可經過 [網格線名稱 <網格線名稱>] 爲網格線定義一個或多個名稱, 爲網格線定義名稱方便容器內項目進行佈局

下面是幾種常見的情景

grid-template-rows: [c1 a1] 100px [c2 a2] 100px [c3] 100px [c4];
repeat(3, [col-start] 250px [col-end]);
複製代碼

3.3 設置網格間距: row-gap、 column-gap、 gap

3.3.1 row-gap: 用於定義行間距

可取值有長度單位、百分比

下面代碼指定了一個三行三列的網格並設置了行間距 10px

.container {
  width: 300px;
  height: 300px;
  display: grid;
  row-gap: 10px;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}
複製代碼

3.3.2 column-gap: 用於定義行間距

可取值有長度單位、百分比

下面代碼指定了一個三行三列的網格並設置了列間距 10px

.container {
  width: 300px;
  height: 300px;
  display: grid;
  column-gap: 10px;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}
複製代碼

3.3.3 gap 是 row-gap、 column-gap 的簡寫屬性

• 語法: gap: <row-gap> <column-gap>
• 注意: 若是隻給定一個值, 則表示列間距和行間距相同

下面代碼指定了一個三行三列的網格並設置了行間距 10px、列間距 20px

.container {
  width: 300px;
  height: 300px;
  display: grid;

  gap: 10px 20px;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}
複製代碼

3.4 項目排列規則: grid-auto-flow

grid-auto-flow 屬性決定容器內子元素排列順序

3.4.1 可取值: row

該值爲默認值, 即 先行後列, 子元素將先填滿第一行, 再開始放入第二行

.container {
  display: grid;
  grid-auto-flow: row;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}
複製代碼

3.4.2 可取值: column

按列進行排序, 子元素將先填滿第一列, 再開始放入第二列

.container {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}
複製代碼

3.4.3 可取值: row dense

按行進行排序, 即 先行後列 而且儘量緊密填滿, 儘可能不出現空單元格

• 在默認狀況下即 grid-auto-flow: row 當第一第二個子元素佔用兩個單元格將產生下面這樣的佈局

.container {
  width: 300px;
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}

// 爲元素設置屬性: 後續將會詳細說明
.project {
  &:nth-child(1),
  &:nth-child(2) {
    grid-column-end: 3;
    grid-column-start: 1;
  }
}
複製代碼

• 這種狀況下可使用 row dense 進行排序, 讓佈局儘量的緊密、填滿全部單元格

.container {
  width: 300px;
  display: grid;
  grid-auto-flow: row dense;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}

// 爲元素設置屬性: 後續將會詳細說明
.project {
  &:nth-child(1),
  &:nth-child(2) {
    grid-column-end: 3;
    grid-column-start: 1;
  }
}
複製代碼

3.4.4 可取值: column dense

按列進行排序, 而且儘量緊密填滿, 儘可能不出現空單元格

• 使用 column 當第一第二個子元素佔用兩個單元格將產生下面這樣的佈局

.container {
  width: 300px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}

// 爲元素設置屬性: 後續將會詳細說明
.project {
  &:nth-child(1),
  &:nth-child(2) {
    grid-row-end: 3;
    grid-row-start: 1;
  }
}
複製代碼

• 這種狀況下可使用 column dense 進行排序, 讓佈局儘量的緊密、填滿全部單元格

.container {
  width: 300px;
  display: grid;
  grid-auto-flow: column dense;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}

// 爲元素設置屬性: 後續將會詳細說明
.project {
  &:nth-child(1),
  &:nth-child(2) {
    grid-row-end: 3;
    grid-row-start: 1;
  }
}
複製代碼

3.5 網格系統在容器內佈局: justify-content、align-content、place-content

3.5.1 justify-content 在水平方向上的佈局

設置網格系統在容器內水平方向上的佈局, 可取值有:

• start(默認值): 水平方向上向左進行靠攏

• end: 水平方向上向右進行靠攏

• center: 居中對齊

• stretch: 自適應拉伸

• space-around: 單元格周圍具備相同空白

• space-between: 單元格向兩端靠齊而且單元格中間具備等比例的空白, 單元格和邊界不存在空白

• space-evenly: 單元格向兩端靠齊而且單元格中間具備等比例的空白, 單元格和邊界一樣具備空白

• 下面代碼實現單元格的水平居中對齊

.container {
  width: 300px;
  height: 300px;
  display: inline-grid;
  justify-content: center;
  grid-template-rows: repeat(3, 50px);
  grid-template-columns: repeat(3, 50px);
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}
複製代碼

• 下面是不用屬性所呈現出來的佈局

3.5.2 align-content 在垂直方向上的佈局

設置網格系統在容器內垂直方向上的佈局, 可取值有:

• start(默認值): 垂直方向上向上進行靠攏

• end: 垂直方向上向下進行靠攏

• center: 居中對齊

• stretch: 自適應拉伸

• space-around: 單元格周圍具備相同空白

• space-between: 單元格向兩端靠齊而且單元格中間具備等比例的空白, 單元格和邊界不存在空白

• space-evenly: 單元格向兩端靠齊而且單元格中間具備等比例的空白, 單元格和邊界一樣具備空白

• 下面代碼實現單元格的垂直居中對齊

.container {
  width: 300px;
  height: 300px;
  display: inline-grid;
  align-content: center;
  grid-template-rows: repeat(3, 50px);
  grid-template-columns: repeat(3, 50px);
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}
複製代碼

• 下面是不用屬性所呈現出來的佈局

3.5.3 place-content 簡寫屬性

• place-content 屬性是 justify-content、align-content 的簡寫屬性
• 語法: place-content: <align-content> <justify-content>
• 注意: 若是隻給定一個值, 則表示水平、垂直方向上單元格具備相同的佈局

下面代碼實現單元格水平垂直居中佈局

.container {
  width: 300px;
  height: 300px;
  display: inline-grid;
  place-content: center;
  grid-template-rows: repeat(3, 50px);
  grid-template-columns: repeat(3, 50px);
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}
複製代碼

3.6 單元格內項目佈局: justify-items、align-items、place-items

3.6.1 justify-items 水平佈局

設置單元格內項目在水平方向上的佈局

• start(默認值): 水平方向上向左靠攏
• end: 水平方向上向右靠攏
• center: 居中對齊
• stretch: 自適應拉伸

下面代碼實現單元格內項目水平居中佈局

.container {
  width: 300px;
  display: grid;
  justify-items: center;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    width: 50px;
    height: 50px;
    background: rgb(random(255), random(255), random(255));
  }
}
複製代碼

3.6.2 align-items 垂直佈局

設置單元格內項目在垂直方向上的佈局

• start(默認值): 垂直方向上向上靠攏
• end: 垂直方向上向下靠攏
• center: 居中對齊
• stretch: 自適應拉伸

下面代碼實現單元格內項目垂直居中佈局

.container {
  width: 300px;
  display: grid;
  align-items: center;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    width: 50px;
    height: 50px;
    background: rgb(random(255), random(255), random(255));
  }
}
複製代碼

3.6.3 place-items 簡寫屬性

• place-items 屬性是 justify-items、align-items 的簡寫屬性
• 語法: place-items: <align-items> <justify-items>
• 注意: 若是隻給定一個值, 則表示水平、垂直方向上具備相同的佈局

下面代碼實現單元格內項目水平垂直居中佈局

.container {
  width: 300px;
  display: grid;
  place-items: center;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    width: 50px;
    height: 50px;
    background: rgb(random(255), random(255), random(255));
  }
}
複製代碼

3.7 容器自動劃分網格設置 grid-auto-columns、grid-auto-rows

• grid-template-columns 屬性和 grid-template-rows 屬性用用於定義容器網格行和列的數目和寬度
• 在網格有限的狀況下, 若是項目過多系統將自動建立新的行或列, grid-auto-columns grid-auto-rows 則用於定義系統自動建立網格時網格的列寬和行寬
• grid-auto-columns grid-auto-rows 屬性值和 grid-template-columns 相似

下面代碼指定了一個二行三列的網格, 多餘的項目將自動建立單元格並設置行寬爲 50x

.container {
  width: 300px;
  display: grid;
  grid-template-rows: repeat(2, 100px);
  grid-template-columns: repeat(3, 100px);
  background: rgba($color: #000, $alpha: 0.04);

  grid-auto-rows: 50px;
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}
複製代碼

3.8 設置網格區域 grid-template-areas

• grid-template-areas 爲網格中單元格劃分區域,一個區域可包含一個或多個單元格
• 若是某些單元格不須要利用, 則使用點 . 表示
• 劃分好的區域, 可用於項目佈局

下面代碼定義了區域 a 和區域 b, 每一個區域都包含兩個單元格, 其他單元格不被利用

.container {
  width: 300px;
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  background: rgba($color: #000, $alpha: 0.04);

  grid-template-areas: 
    'a a .'
    'b b .'
    '. . .';
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}
複製代碼

3.9 grid-template、grid 簡寫屬性

• grid-template 屬性是 grid-template-columns grid-template-rows 和 grid-template-areas 這三個屬性的合併簡寫形式

• grid 屬性是 grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns grid-auto-flow 這六個屬性的合併簡寫形式。

4、 項目屬性

4.1 設置項目邊界 grid-column-start、grid-column-end、grid-row-start、grid-row-end

四個屬性用於定義項目的位置, 屬性值能夠是網格線索引、網格線名稱、關鍵詞 span

• grid-column-start: 決定項目左邊框所在的垂直網格線
• grid-column-end: 決定項目右邊框所在的垂直網格線
• grid-row-start: 決定項目上邊框所在的水平網格線
• grid-row-end: 決定項目下邊框所在的水平網格線

下面代碼, 使用網格線索引爲第一個項目設置左右邊框位置, 使用網格線名稱設置第一個項目上下邊框位置

.container {
  width: 300px;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: [a1] 100px [a2] 100px [a3] 100px [a4];
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}

.project:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 3;

  grid-row-start: a1;
  grid-row-end: a3;
}
複製代碼

下面代碼使用 span 關鍵字爲第一個項目設置邊框位置, span 關鍵字定義項目跨度

.container {
  width: 300px;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: [a1] 100px [a2] 100px [a3] 100px [a4];
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}

.project:nth-child(1) {
  grid-column-start: span 2;
  grid-row-start: span 2;
}
複製代碼

4.2 兩個簡寫屬性 grid-column、grid-row

• grid-column 屬性是 grid-column-start 和 grid-column-end 簡寫形式, 兩個屬性值間用 / 分隔
• grid-row 屬性是 grid-row-start 屬性和 grid-row-end 簡寫形式, 兩個屬性值間用 / 分隔

.container {
  width: 300px;
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: [a1] 100px [a2] 100px [a3] 100px [a4];
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}

.project:nth-child(1) {
  grid-row: 1 / 3;    // 等價於 grid-row: 1 / span 2;
  grid-column: 1 / 3; // 等價於 grid-column: 1 / span 2;
}
複製代碼

4.3 指定項目所處區域 grid-area

grid-area 指定項目所處的區域

.container {
  width: 300px;
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  background: rgba($color: #000, $alpha: 0.04);

  grid-template-areas:
    'a a .'
    'a a .'
    '. . .';
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    background: rgb(random(255), random(255), random(255));
  }
}

.project:nth-child(1) {
  grid-area: a;
}
複製代碼

4.4 項目在單元格內佈局 justify-self、align-self、place-self

4.4.1 justify-self 水平佈局

定義當前項目在單元格內水平方向上的佈局

• start(默認值): 水平方向上向左靠攏
• end: 水平方向上向右靠攏
• center: 居中對齊
• stretch: 自適應拉伸

下面代碼實現項目在其單元格內水平居中

.container {
  width: 300px;
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    width: 50px;
    height: 50px;
    background: rgb(random(255), random(255), random(255));
  }
}

.project:nth-child(1) {
  justify-self: center;
}
複製代碼

4.4.2 align-self 垂直佈局

定義當前項目在單元格內垂直方向上的佈局

• start(默認值): 垂直方向上向上靠攏
• end: 垂直方向上向下靠攏
• center: 居中對齊
• stretch: 自適應拉伸

下面代碼實現項目在其單元格內垂直居中

.container {
  width: 300px;
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    width: 50px;
    height: 50px;
    background: rgb(random(255), random(255), random(255));
  }
}

.project:nth-child(1) {
  align-self: center;
}
複製代碼

4.4.3 place-self 簡寫屬性

place-self 屬性是 align-self 屬性和 justify-self 屬性的簡寫, 語法: place-self: <align-self> <justify-self>。 注意: 若是省略第二個值, place-self 屬性則表示水平垂直具備相同佈局

下面代碼實現項目在其單元格內水平、垂直居中

.container {
  width: 300px;
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  background: rgba($color: #000, $alpha: 0.04);
}

@for $index from 1 to 10 {
  .project:nth-child(#{$index}) {
    width: 50px;
    height: 50px;
    background: rgb(random(255), random(255), random(255));
  }
}

.project:nth-child(1) {
  place-self: center;
}
複製代碼