前端設計-css網格佈局的最佳實踐

愈來愈常見的問題-如今人們正在使用css網格佈局來生產-彷佛是「最好的作法是什麼？」這個問題的簡短答案是使用規範中定義的佈局方法。您選擇使用的規範的特定部分，以及如何將網格與其餘佈局方法(如Flexbox)相結合，是針對您正在嘗試構建的模式以及您和團隊想要如何工做所起做用的。

從更深的角度來看，我認爲這種對「最佳實踐」的要求可能代表人們對使用與之前大相徑庭的佈局方法缺少信心。也許是由於咱們正在使用Grid來處理它設計不適合的事情，或者咱們應該使用Grid。多是擔憂支持舊的瀏覽器，或者網格如何適應咱們的開發工做流程。

在本文中，我將嘗試介紹一些可能被描述爲最佳實踐的東西，有些事情可能並不須要擔憂。

調查

爲了幫助瞭解這篇文章，我想知道其餘人如何使用網格佈局在生產中，他們面臨什麼挑戰，他們真正喜歡什麼？是否存在常見的問題、問題或方法。爲了找出答案，我作了一個快速調查，詢問人們如何使用網格佈局，特別是他們最喜歡的，以及他們發現的挑戰性。

在下面的文章中，我將引用並直接引用其中一些響應。我還將連接到許多其餘資源，在那裏您能夠找到更多關於所描述的技術。結果發現，在調查答覆中，有不少值得有趣的文章能夠解開。我會討論將來帖子中出現的一些其餘事情。

無障礙

若是使用網格規範中的任何一部分，您須要注意使用時，它是當使用任何可能致使內容從新排序的內容：

做者必須使用命令和網格放置屬性來實現內容的可視化、非邏輯、重排。使用這些特性來執行邏輯重排的樣式表是不一致的。

— 網格規範：從新排序和可訪問性

這並非網格獨有的，然而，如此容易地在兩個維度中從新排列內容的能力使得它成爲網格的一個更大的問題。可是，若是使用任何容許內容從新排序的方法--不管是Grid、Flexbox仍是絕對定位--您須要注意不要將視覺體驗與文檔中內容的結構聯繫起來。屏幕閱讀器(以及僅使用鍵盤在文檔中導航的人員)將按照源中項的順序進行操做。

在使用時須要特別當心的地方flex-direction在Flexbox中反轉順序；order屬性在Flexbox或Grid中；使用任何方法放置網格項，若是它將項目移出文檔中的邏輯順序；以及使用grid-auto-flow.

有關這個問題的更多信息，請參閱下列資源：

• 網格佈局和可訪問性-MDN

• Flexbox與鍵盤導航斷開

我應該使用哪一種網格佈局方法？

「網格中有這麼多選擇，堅持編寫一致的方式(例如命名網格線、定義網格模板-區域、fallbacks、媒體查詢)是一個挑戰，這樣它就能夠維護整個團隊。」

— 米歇爾巴克

當您首先查看網格時，可能會因建立佈局的不一樣方式而顯得很是困難。然而最終，全部這些都歸結於從一個網格線到另外一個線的位置。您能夠根據您正在努力實現的佈局進行選擇，以及對於您的團隊和您正在構建的站點所作的工做。

沒有正確的或錯誤的方法。下面，我將討論一些常見的混亂主題。我已經在前面的文章中已經提到了許多其餘潛在的困惑。網格和障礙塊.」

我應該使用隱式仍是顯式網格？

您定義的網格grid-template-columns和grid-template-rows被稱爲顯式網格。顯式網格容許在網格上命名線條，也可使您可以以網格的結尾來定位網格的末端。您將選擇一個顯式的Grid來完成這些事情，一般狀況下，當您有一個佈局時，全部的佈局都是設計好的，而且清楚地知道您的網格線應該去哪裏，以及軌道的大小。

我常用隱式網格來處理行跟蹤。我想定義列，可是行只會自動大小，而且會擴展到包含內容。您能夠在某種程度上控制隱式網格。grid-auto-columns和grid-auto-rows然而，你的控制比你定義的東西要少。

您須要肯定您是否知道您擁有多少內容，所以您能夠肯定行數和列數-在這種狀況下您能夠建立一個顯式網格。若是您不知道您有多少內容，可是隻須要行或列來保存任何內容，您將使用隱式網格。

然而，這兩種方法是有可能的。在下面的css中，我在顯式網格中定義了三個列和三個行，所以四行內容將以下：

• 最高的軌道，至少在高度上，但擴展以使內容更高，

• 一條固定在1米高的跑道，

• 至少高度的軌道(但擴展)。

任何進一步內容都將進入隱式網格中建立的行，而且我使用grid-auto-rows屬性使這些軌道至少高出1，000米，擴展到auto.

.grid { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: minmax(200px auto) 400px minmax(300px, auto); grid-auto-rows: minmax(300px, auto); grid-gap: 20px; }Copy

具備柔性列數的柔性網格

經過使用重複符號、autofill和minmax，您能夠建立儘量多的音軌做爲適合容器的模式，從而消除了媒體查詢的需求在某種程度上。這種技術能夠在本視頻教程而且在我最近的文章中也展現了相似的想法2018中基於媒體查詢的響應設計.」

選擇此技術時，當您高興地知足內容在較少空間時減小低於先前內容，而且很高興容許在尺寸大小上有不少靈活性。您已指定要顯示您的列以最小大小顯示，並將自動填充.

調查中有幾個評論讓我懷疑人們是否選擇了這種方法，當他們真正想要一個固定數量的列的網格時。若是您最終在某些斷點上出現不可預測的列數，那麼您最好設置列數-並根據須要從新定義它，而不是使用auto-fill或auto-fit.

• 咱們開發了響應性佈局

• 免費數據驅動應用程序

我應該用哪一種軌道上漿方法？

我在文章中詳細描述了跟蹤尺寸。那個盒子有多大？網格佈局中的理解量可是，我常常會問到如何使用哪一種方法來使用。尤爲是，我被問到百分比大小和fr單位。若是您只使用fr單元做爲子元素，所以它不一樣於使用百分比，由於它分配可用空間。若是你把一個更大的項目放在一個軌道上，那麼fr直到將工做是讓這條軌道佔用更多的空間，並分配什麼是剩餘的。

.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px;}Copy

第一列更普遍，由於網格已經分配了更多的空間。

使fr單位分發全網格容器中的空間，您須要給它最小大小的0使用minmax().

.grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); grid-gap: 20px;}Copy

強制設置0的最小值可能會致使溢出。

因此你能夠選擇使用fr在其中的任一種場景中：您但願從自動(默認行爲)和那些須要相等分佈的方法來分配空間分配。我一般使用fr單位，而後它爲您制定大小，並容許使用固定的寬度軌道或間隙。我惟一使用百分比的時候是當我將網格組件添加到使用其餘佈局方法的現有佈局中時。若是我但願個人網格組件與使用百分比的基於浮動或柔性的佈局對齊，那麼在個人網格佈局中使用它們意味着全部的東西都使用相同的大小調整方法。

自動放置物品仍是設置他們的位置？

您一般會發現您只須要在佈局中放置一兩個項，其他項則根據內容順序進行設置。事實上，這是一個很是好的測試，您沒有斷開源和可視化顯示。若是事情幾乎都是基於自動放置的位置，那麼他們可能會處於良好的秩序狀態。

一旦我決定了一切都到哪裏去了，我就會傾向於給全部東西分配一個位置。這意味着若是有人向文檔添加一些東西，網格自動地將它放置在某個意想不到的地方，那麼我不會由於奇怪的事情發生而發生。若是全部東西都放置好了，網格將把該項目放入下一個可用的空網格單元中。這可能並非你想要的地方，可是坐在你佈局結束時坐下來可能比進入中間的東西更好，並推其餘東西。

哪一種定位方法使用？

當使用網格佈局時，最終全部事情都歸結爲將項目從一行中放置到另外一個行。其餘一切本質上都是這方面的幫助者。

若是您想要命名行，請選擇您的團隊，使用網格模板區域，或者您將使用不一樣類型佈局的組合。我發現我喜歡使用網格模板區域來特別地使用小組件。然而，沒有對錯之分。找出最適合你的東西。

網格與其餘佈局機制相結合

請記住，網格佈局不是一個真正的佈局方法來管理它們所有，它是設計爲某種類型的佈局-即二維佈局。其餘佈局方法仍然存在，您應該考慮每一個模式和適合它最好。

我認爲這對於咱們來講很是困難，由於咱們過去常常用佈局方法來進行黑客活動，讓他們作一些他們不是真正設計出來的東西。如今是一個很好的時候邁出一步，看看他們設計的任務的佈局方法，並記住要使用它們來完成這些任務。

尤爲是不管我多久寫一篇關於網格和Flexbox的文章，我都會問到哪個人應使用。有不少模式，不管佈局方法都有完美的意義，它真的取決於您。沒有人會對你大聲地喊你，由於你選擇了網格，或者是在Flexbox上的網格。

在我本身的工做中，我傾向於使用Flexbox來實現組件，由於我但願物品的天然大小可以強烈地控制它們的佈局，基本上將其餘項目推到周圍。我也常用Flexbox，由於我想要對齊，由於box比對屬性僅用於Flexbox和grid中。我可能有一個帶有一個子項的flex容器，以便使我可以對該子項目進行調整。

多是Flexbox的標誌不是我應該選擇的佈局方法，就是當我開始爲flex項目添加百分比寬度和設置時。flex-grow
到0。增長對flex項目的百分比寬度的緣由經常是由於我試圖將它們按兩個維度進行線性化(在兩個維度上構建事物正好是網格所須要的)。不過，試一下二者，看看哪一種看起來適合內容或設計模式最好。你不太可能經過這樣作而產生任何問題。

嵌套網格和flex項目

這也產生了不少，而且建立網格項目也沒有問題，所以網格容器也是如此，所以在另外一個網格中嵌套一個網格。您能夠在Flexbox中作一樣的操做，建立一個flex項目和flex容器。您還能夠建立網格項目和flex容器或一個網格容器flex項目-這些都不是問題！

目前咱們不能作的就是嵌套一個網格，而且嵌套網格使用定義在父級的網格跟蹤。這將是很是有用的，也是最有用的建議網格規範的第2級但願能解決。嵌套網格如今變成了一個新網格，所以您須要當心調整大小以確保它與任何父音軌相一致。

您能夠在一個頁面上擁有許多網格

調查中出現了幾回評論，令我吃驚的是，彷佛有一個想法認爲網格應該侷限於主佈局，而一個頁面上的許多網格可能不是一個好東西。您能夠擁有儘量多的網格，您喜歡！使用網格來作大事情和小事情，若是它把意義放在網格上，而後使用網格。

支持舊瀏覽器和支持舊瀏覽器

「與@支持一塊兒使用的網格使咱們可以更好地控制咱們指望看到的佈局變化數量。它還與咱們的漸進式加強方法很是有效，意味着咱們能夠用現代瀏覽器獎勵那些不容許對那些不使用最新技術的人提供內容的方法。

— 喬·蘭伯特工做n.rareloop.com

在調查中，許多人提到了舊瀏覽器，可是，那些認爲支持老瀏覽器很難的人之間有着至關平等的分歧，那些認爲因爲功能查詢和網格覆蓋其餘佈局方法而感到輕鬆的人。我已經寫了一些關於建立這些fallbacks的原理。使用css網格：無網格支持瀏覽器.」

通常來講，現代瀏覽器比之前的瀏覽器更具備互操做性。咱們一般會看到更少實際的「瀏覽器bug」，若是您正確使用html和css，那麼您一般會發如今瀏覽器中看到的內容與另外一個瀏覽器中的狀況相同。

固然，咱們確實有一個瀏覽器還沒有爲某個規範或規範的某些部分提供支持的狀況。隨着網格的發展，咱們很是幸運的是，瀏覽器在一個很是完整和互操做性的方式中發送網格佈局，在短期內彼此之間。所以，咱們對測試的考慮每每須要使用網格測試瀏覽器，而無需網格。您也能夠選擇使用-ms在IE10和IE11中前綴版本，而後要求測試做爲第三類型的瀏覽器。

支持現代網格佈局(而不是ie版本)的瀏覽器也支持特徵查詢。這意味着在使用網格支持以前，您能夠測試網格支持。

測試不支持網格的瀏覽器

當不支持網格佈局時使用fallbacks來進行瀏覽器(或使用-ms對於IE10和11的前綴版本，您將想要測試這些瀏覽器如何呈現網格佈局。要作到這一點，您須要一種方法來查看示例瀏覽器中的站點。

我不會經過檢查是否支持一些荒謬的東西，或者拼寫錯誤的值來破壞您的功能查詢。grid
。若是樣式表很是簡單，那麼這種方法只會有效，而且您徹底能夠將全部內容都與您的網格佈局徹底結合在特徵查詢中。這是一個很是脆弱和耗時的工做方式，尤爲是若是您普遍使用網格。此外，一箇舊瀏覽器不只缺少對網格佈局的支持，還有其餘css屬性也不支持。若是你正在尋找「最佳實踐」，那麼設置本身，這樣你就能在很好的位置測試你的工做是高的上面！

有幾種簡單的方法來設置一個正確的方法來測試您的fallbacks。最簡單的方法-若是你有一個合理快速的互聯網鏈接，而且不介意支付訂閱費-就是使用諸如BrowserStack這樣的服務。這是一種服務，能夠在整個真實瀏覽器上查看網站(甚至是在計算機上開發的網站)。BrowserStack確實提供了開放源碼項目免費帳戶.

要在本地進行測試，個人建議是使用安裝目標瀏覽器的虛擬機。微軟提供免費服務。虛擬機下載將ie版本從新回到ie8，還有edge。您還能夠安裝到虛擬機上，一箇舊版本的瀏覽器，根本沒有網格支持。例如，獲取一個firefox 51或如下的副本。安裝了您的老firefox以後，請確保關閉自動更新，如這裏所說明的不然它會悄悄地更新本身！

而後您能夠在IE11中測試您的站點，而後在一個vm上進行非支持firefox(比拼寫錯誤值更少的脆弱解決方案)。設置起來可能須要你一個小時左右，可是你會在一個很是好的地方測試你的自我評估。

unlearning舊習慣

「這是我第一次使用網格佈局，因此有不少概念要學習，屬性理解。」從概念上講，我發現最困難的事情是忘掉我多年來作過的全部事情，好比清理漂浮物，把全部東西打包在集裝箱裏。

— 希德工做hiddedevries.nl/en

許多回應這項調查的人提到，須要改掉舊習慣，以及如何更容易地學習佈局對於徹底新的css來講更容易。我傾向於贊成。當人們對人進行教學時，初學者使用網格時遇到的問題不多，而經驗豐富的開發者則努力將網格返回到一維佈局方法中。我已經看到了使用css網格來嘗試「網格系統」的嘗試，它將返回用於浮動或基於flex的網格所需的行包裝器。

不要懼怕嘗試新技術。若是您有能力在幾個瀏覽器中測試並保持注意潛在的可訪問性問題，那麼您真的不能太過錯誤。若是你找到了一個創造某種模式的偉大方法，讓其餘人知道它。咱們都是新的使用網格生產的新產品，因此確定有不少東西能夠發現和分享。

「網格佈局是自媒體查詢以來最使人興奮的css開發。對於現實世界開發者來講，這是一個很是好的想法，它是生產中使用的絕對樂趣-對於設計師和開發者來講都是同樣的。

— 試着嘗試工做n.trysmudford.com

爲了包裝，這裏有一個很是簡短的列表當前最佳實踐！若是你發現了那些在你本身狀況下作或不起做用的事情，那麼請把它們添加到評論中。

1. 要很是清楚內容從新排序的可能性。檢查您沒有斷開來自文檔順序的可視化顯示。

2. 使用本地或遠程虛擬機使用實際目標瀏覽器進行測試。

3. 不要忘記，舊的佈局方法仍然有效和有用。嘗試不一樣的方式來實現模式。不要由於不得不使用Grid而掛斷。

4. 知道，做爲一個經驗豐富的前端開發人員，您可能會對佈局如何工做有一個總體的先入爲主的見解。試着從新審視這些新方法，而不是強迫它們回到舊模式。

5. 繼續試着去作。咱們都是新來的。測試你的工做並分享你所發現的東西。

關注小編了解更多精彩內容，還可私信「學習」，領取精品的前端免費學習課程視頻，同時我將爲您分享精品資料。