ion-grid
網格是一個強大的行動優先 flexbox 系統，用於建立客製化佈局。它由三個單元組成：一個網格、列和欄。欄將擴展以填滿列，並調整大小以容納其他欄。它基於 12 欄佈局，並根據螢幕大小使用不同的斷點。欄數可以使用 CSS 自訂。
概述
- 網格充當所有列和欄的容器。網格會佔據其容器的全部寬度，但新增
fixed屬性會根據螢幕大小設定寬度，請參閱下方的固定網格。 - 列是欄的水平群組，可正確對齊欄。
- 內容應放置在欄中，只有欄可以是列的直接子元素。
size屬性表示在預設每列 12 欄中要使用的欄數。因此，可以在欄中新增size="4"，以便佔用網格的 1/3 或 12 欄中的 4 欄。- 沒有大小值的欄將自動具有相等的寬度。例如，四欄將自動各自寬 25%。
- 欄寬設定為百分比，因此它們始終是流動的，並相對於其父元素調整大小。
- 各欄之間有邊距。但是，可以將
ion-no-padding類別新增至網格，以從網格和欄中移除邊距。請參閱CSS 工具，以了解更多可以套用至網格的樣式。 - 有五個網格層級，每個回應式斷點各一個：所有斷點（特小）、小、中、大和特大。
- 網格層級基於最小寬度，這表示它們會套用至其層級和所有大於其層級的層級（例如，
size-sm="4"會套用至小型、中型、大型和特大型裝置）。 - 網格可以透過 CSS 變數自訂。請參閱自訂網格。
預設斷點
下表定義了網格的預設斷點和對應的屬性。目前無法自訂斷點值。如需了解無法自訂的原因的詳細資訊，請參閱媒體查詢中的變數。
| 名稱 | 值 | 寬度屬性 | 偏移屬性 | 推移屬性 | 拉移屬性 | 說明 |
|---|---|---|---|---|---|---|
| xs | 0 | size | offset | push | pull | 在 (min-width: 0) 時設定欄 |
| sm | 576px | sizeSm | offsetSm | pushSm | pullSm | 在 (min-width: 576px) 時設定欄 |
| md | 768px | sizeMd | offsetMd | pushMd | pullMd | 在 (min-width: 768px) 時設定欄 |
| lg | 992px | sizeLg | offsetLg | pushLg | pullLg | 在 (min-width: 992px) 時設定欄 |
| xl | 1200px | sizeXl | offsetXl | pushXl | pullXl | 在 (min-width: 1200px) 時設定欄 |
基本用法
根據預設，欄在列中對於所有裝置和螢幕大小會佔用相等的寬度。
固定網格
網格會佔用其容器的 100% 寬度。將 fixed 屬性新增至網格，寬度會根據螢幕大小設定。下表中列出了每個斷點的網格寬度，但可以自訂。如需詳細資訊，請參閱自訂網格。在 StackBlitz 中開啟以下範例並調整螢幕大小，以查看網格寬度變化。
| 名稱 | 值 | 說明 |
|---|---|---|
| xs | 100% | xs 螢幕的寬度為 100% |
| sm | 540px | 在 (min-width: 576px) 時將網格寬度設定為 540px |
| md | 720px | 在 (min-width: 768px) 時將網格寬度設定為 720px |
| lg | 960px | 在 (min-width: 992px) 時將網格寬度設定為 960px |
| xl | 1140px | 在 (min-width: 1200px) 時將網格寬度設定為 1140px |
欄大小
可以將欄設定為特定大小，以佔用總欄數中的特定數量，或根據內容調整其寬度。預設欄數為 12，但可以自訂。如需詳細資訊，請參閱下方的欄數章節。
基於內容的大小
透過將 size 設定為 "auto"，欄可以根據其內容的自然寬度調整大小。當將欄設定為絕對寬度（例如，特定像素數）時，這是必要的。自動寬度欄旁邊的欄將調整大小以填滿列。
指定的大小
設定欄的 size，其他欄將自動在其周圍調整大小。如果在所有欄上指定大小且其加總不等於總欄數，則欄後方會出現空白。
回應式大小
size 屬性將變更所有斷點的欄寬。欄也提供多個大小屬性，這些屬性會在「size」結尾附加斷點名稱。這些屬性可用於根據螢幕大小變更欄的寬度。在 StackBlitz 中開啟以下範例並調整螢幕大小，以查看欄寬變化。
欄偏移
可以偏移欄，以將欄向右移動總欄數中的特定欄數。
指定的偏移
可以使用 offset 屬性將欄向右移動。此屬性會將欄的左邊距增加指定的欄數。如果存在任何欄，它也會將欄移動到其右邊。
回應式偏移
offset 屬性將變更所有斷點的欄左邊距。欄也提供多個偏移屬性，這些屬性會在「offset」結尾附加斷點名稱。這些屬性可用於根據螢幕大小變更欄的偏移。在 StackBlitz 中開啟以下範例並調整螢幕大小，以查看欄偏移變化。
欄推移和拉移
可以將欄向右推移或向左拉移總欄數中的特定欄數。
指定的推移和拉移
透過新增 push 和 pull 屬性，重新排序欄。這些屬性會根據指定的欄數調整欄的 left 和 right，使其易於重新排序欄。如果將欄移動到另一個欄所在的位置，則會導致欄重疊。
回應式推移和拉移
push 和 pull 屬性將會針對所有斷點變更欄位的位置。欄位也提供一些 push 和 pull 屬性，這些屬性的結尾會附加斷點名稱。這些屬性可以用來根據螢幕尺寸變更欄位的位置。在 StackBlitz 中開啟以下範例並調整螢幕大小，以查看欄位位置的變化。
對齊
垂直對齊
透過將不同的類別新增至列中，所有欄位都可以在列內垂直對齊。如需可用類別的清單，請參閱css 公用程式。
水平對齊
透過將不同的類別新增至列中，所有欄位都可以在列內水平對齊。如需可用類別的清單，請參閱css 公用程式。
自訂格線
透過使用我們內建的 CSS 變數，可以自訂預先定義的格線屬性。變更邊距、欄數和更多屬性的值。
固定寬度
可以使用 --ion-grid-width CSS 變數，針對所有斷點設定固定格線的寬度。若要覆寫個別斷點，請使用 --ion-grid-width-{breakpoint} CSS 變數。每個斷點的預設值可以在固定格線區段中找到。在 StackBlitz 中開啟以下範例並調整螢幕大小，以查看格線寬度的變化。
欄數
可以使用 --ion-grid-columns CSS 變數修改格線欄數。預設情況下有 12 個格線欄位，但可以將其變更為任何正整數，並用於計算每個個別欄位的寬度。
邊距
可以使用 --ion-grid-padding CSS 變數，針對所有斷點設定格線容器的邊距。若要覆寫個別斷點，請使用 --ion-grid-padding-{breakpoint} CSS 變數。
可以使用 --ion-grid-column-padding CSS 變數，針對所有斷點設定欄位的邊距。若要覆寫個別斷點，請使用 --ion-grid-column-padding-{breakpoint} CSS 變數。
屬性
固定
| 說明 | 如果為 true，格線將根據螢幕尺寸具有固定寬度。 |
| 屬性 | fixed |
| 類型 | boolean |
| 預設值 | false |
事件
此元件沒有可用的事件。
方法
此元件沒有可用的公用方法。
CSS 陰影部分
此元件沒有可用的 CSS 陰影部分。
CSS 自訂屬性
| 名稱 | 說明 |
|---|---|
--ion-grid-padding | 格線的邊距 |
--ion-grid-padding-lg | 在 lg 螢幕上格線的邊距 |
--ion-grid-padding-md | 在 md 螢幕上格線的邊距 |
--ion-grid-padding-sm | 在 sm 螢幕上格線的邊距 |
--ion-grid-padding-xl | 在 xl 螢幕上格線的邊距 |
--ion-grid-padding-xs | 在 xs 螢幕上格線的邊距 |
--ion-grid-width | 固定格線的寬度 |
--ion-grid-width-lg | 在 lg 螢幕上固定格線的寬度 |
--ion-grid-width-md | 在 md 螢幕上固定格線的寬度 |
--ion-grid-width-sm | 在 sm 螢幕上固定格線的寬度 |
--ion-grid-width-xl | 在 xl 螢幕上固定格線的寬度 |
--ion-grid-width-xs | 在 xs 螢幕上固定格線的寬度 |
插槽
此元件沒有可用的插槽。