# 網格 創建一個完全響應式并可以嵌套的流動網格布局。 UIKit中的網格系統遵循移動優先的方式并且最多可容納10個網格列。它使用網格內預定義的類對每個單元格的列寬進行了定義。另外，還可以把網格與 [Flex 組件](flex.html) 中的類組合使用，雖然它只能在現代瀏覽器中正常運行。 * * * ## 用法 向一個父元素添加 `.uk-grid` 類來創建網格容器。對子元素添加一個 `.uk-width-*` 類來限定單元格的寬度。網格支持1、2、3、4、5、6和10個單元劃分。下面的列表為你提供了可以應用到單元的 `uk-width-*` 類的概述。 | Class | 描述 | | --- | --- | | `.uk-width-1-1` | 填滿可見寬度的100％。 | | `.uk-width-1-2` | 把網格等分為兩半。 | | `.uk-width-1-3` to `.uk-width-2-3` | 將網格劃分成三分之一。 | | `.uk-width-1-4` to `.uk-width-3-4` | 將網格劃分成四分之一。 | | `.uk-width-1-5` to `.uk-width-4-5` | 將網格劃分成五分之一。 | | `.uk-width-1-6` to `.uk-width-5-6` | 將網格劃分成六分之一。 | | `.uk-width-1-10` to `.uk-width-9-10` | 將網格劃分成十分之一。 | 我們特意為每組單元建立了一種冗余，所以在實際應用時，`.uk-width-5-10` 類與 `.uk-width-1-2` 類的實際效果都是一樣的。 ### Example 仔細看看下面網格的例子，這可以使你了解所有 `.uk-width-*` 類的基本使用方法。  注意 網格并沒有相關聯的CSS樣式。在示例中，我們使用了 [面板組件](panel.html)。 ### Markup 下面是關于如何使用默認的兩列網格代碼簡單示例： ``` <div class="uk-grid"> <div class="uk-width-1-2">...</div> <div class="uk-width-1-2">...</div> </div> ``` * * * ## 響應式寬度 UIKit中提供了一些非常有用的響應式寬度的類。基本上它們的使用方法就像通常寬度的類一樣，但是它們帶有前綴，這樣它們只在特定的斷點來產生效果。這些類可以結合 [效果組件](utility.html) 中的可見性類來使用。這對于調整不同尺寸設備的布局和內容是非常重要的。 | Class | 描述 | | --- | --- | | `.uk-width-*` | 對于任何寬度的設備，網格都保持列并排。 | | `.uk-width-small-*` | 影響寬度在 _480px_ 以上的設備。網格列將在較小的視口中堆疊。 | | `.uk-width-medium-*` | 影響寬度在 _768px_ 以上的設備。網格列將在較小的視口中堆疊。 | | `.uk-width-large-*` | 影響寬度在 _960px_ 以上的設備。網格列將在較小的視口中堆疊。 | 重要 若要設置網格堆疊列上下間的邊距，只需添加 `data-uk-grid-margin` 屬性。 ### Example  * * * ## 網格排水溝/Grid gutter 好吧，其實是網格之間的間隔。網格會自動在列之間創建一個水平間距，以及在連續的兩個網格間創建一個垂直方向的間隔。默認情況下，網格間隔在大屏幕上看起來會比較寬。 ### Example  * * * ### 中等排水溝/Medium gutter 在網格之間應用中等的間隔，只需要添加 `.uk-grid-medium` 類。 #### Example  * * * ### 小點的排水溝/Small gutter 在網格之間應用較小的間隔，只需要添加 `.uk-grid-small` 類。 #### Example  * * * ### 消除排水溝/Collapse gutter 完全地去掉間隔，只需要添加 `.uk-grid-collapse` 類。 #### Example  * * * ## 網格的嵌套 使用嵌套網格你可以輕松地擴展你的網格布局。 ### Example  #### Markup ``` <div class="uk-grid"> <div class="uk-width-1-2">...</div> <div class="uk-width-1-2"> <div class="uk-grid"> <div class="uk-width-1-2">...</div> <div class="uk-width-1-2">...</div> </div> </div> </div> ``` * * * ## 居中網格 添加 [效果組件](utility.html) 中的 `.uk-container-center` 類來讓一個網格居中顯示。 #### Example  * * * ## 網格分隔線 添加 `.uk-grid-divider` 類用線條分隔網格列。要使用水平線分隔網格，只需在 `&lt;hr&gt;` 或 `&lt;div&gt;` 元素添加這個類。 ### Example  ### Markup ``` <div class="uk-grid uk-grid-divider">...</div> <hr class="uk-grid-divider"> <div class="uk-grid uk-grid-divider">...</div> ``` 注意 水平分隔線不能用在含有 `uk-push-*` 類或 `uk-pull-*` 類的網格中。 * * * ## 源碼排序 可以更改列的顯示順序，使其在源代碼中保持一個特定的列順序。添加 `.uk-push-*` 類，向右移動列。添加 `.uk-pull-*` 類，向左移動列。這可以使你進行類似翻轉移動設備或改變窗口寬度時改變列的顯示順序。這些類還可以用于偏移列，在列之間建立額外的空隙。 源碼排序對SEO和響應式設計是非常有用的，因為在狹窄的視口中網格會根據標簽的源代碼順序來顯示。 注意 此功能只能結合 `.uk-width-medium-*` 類來使用。 ### Example  ### Markup ``` <div class="uk-grid"> <div class="uk-width-medium-1-2 uk-push-1-2">...</div> <div class="uk-width-medium-1-2 uk-pull-1-2">...</div> </div> ``` * * * ## 匹配列的高度 要匹配網格列的高度，只需要在你的網格添加 `data-uk-grid-match` 屬性。如果你的網格包含多個row，只有同一個row中的網格列會被匹配。只需要使用 `data-uk-grid-match="{row: false}"` 屬性就能跨越row的隔閡來匹配網格列的高度。 ### Example  ### Markup ``` <div class="uk-grid" data-uk-grid-match>...</div> ``` 注意 如果網格列的寬度延伸到100%，它們的高度將不再匹配。這樣做是有道理的，比如說，當它們在一個較窄的視口中堆疊時。 * * * ### 匹配面板的高度 如果想要匹配一個網格中多個面板的高度，只需要添加 `.uk-grid-match` 類。在使用data屬性時，必須添加 `{target:'.uk-panel'}` 選擇器。 ### Example  ### Markup ``` <div class="uk-grid uk-grid-match" data-uk-grid-match="{target:'.uk-panel'}"> <div class="uk-width-medium-1-3"> <div class="uk-panel">...</div> </div> </div> ``` * * * ## 包裝多個行（row） 你也可以創建一個網格，使其包含任意多個列，這些列會自動地換到下一行。只需添加 `data-uk-grid-margin` 屬性，就能創建網格行（row）之間的margin。通常這樣的布局使用了 `&lt;ul&gt;` 元素。 #### Example  注意 你也可以對網格列的寬度進行自定義。只需添加 `.uk-width` 類，并使用內聯樣式定義寬度。下面的例子對寬度使用了固定的像素值，對于圖片你也可以這樣做。  #### Markup ``` <ul class="uk-grid" data-uk-grid-margin> <!-- 這些元素使用百分比寬度 --> <li class="uk-width-medium-1-5">...</li> <li class="uk-width-medium-3-10">...</li> <!-- 這些元素使用像素值寬度 --> <li class="uk-width" style="width: 100px;">...</li> <li class="uk-width" style="width: 150px;">...</li> </ul> ``` * * * ## 均勻的網格列 要創建一個子元素的寬度都是均勻分割的網格，你不必為網格中的每個列表元素里添加同樣的類。只需要添加一個 `.uk-grid-width-*` 類到網格本身即可。 | Class | 描述 | | --- | --- | | `.uk-grid-width-1-2` | 將網格均勻分為兩份 | | `.uk-grid-width-1-3` | 將網格均勻分為三份 | | `.uk-grid-width-1-4` | 將網格均勻分為四份 | | `.uk-grid-width-1-5` | 將網格均勻分為五份 | | `.uk-grid-width-1-6` | 將網格均勻分為六份 | | `.uk-grid-width-1-10` | 將網格均勻分為十份 | ### Example  ### Markup ``` <ul class="uk-grid uk-grid-width-1-5"> <li>...</li> <li>...</li> </ul> ``` * * * ### 響應式寬度 UIkit同樣提供了網格的響應式寬度類。可以用它保持均勻尺寸的網格列，無論設備寬度如何。 | Class | 描述 | | --- | --- | | `.uk-grid-width-*` | 影響所有設備寬度 | | `.uk-grid-width-small-*` | 影響 _480px_ 以上的設備寬度。 | | `.uk-grid-width-medium-*` | 影響 _768px_ 以上的設備寬度。 | | `.uk-grid-width-large-*` | 影響 _960px_ 以上的設備寬度。 | | `.uk-grid-width-xlarge-*` | 影響 _1220px_ 以上的設備寬度。 | ### Example  ### Markup ``` <ul class="uk-grid uk-grid-width-1-2 uk-grid-width-medium-1-3 uk-grid-width-large-1-5"> <li>...</li> <li>...</li> </ul> ```