css網格佈局的最佳實踐

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

從更深的角度來看，我認為這種對“最佳實踐”的要求可能表明人們對使用與以前截然不同的佈局方法缺乏信心。也許是因為我們正在使用Grid來處理它設計不適合的事情，或者我們應該使用Grid。可能是擔心支援舊的瀏覽器，或者網格如何適應我們的開發工作流程。

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

在這裡給大家分享一下，我是一名5年前端工程師，自己建了一個q群：731771211 ，從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入

調查

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

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

無障礙

如果使用網格規範中的任何一部分，您需要注意使用時，它是當使用任何可能導致內容重新排序的內容：

必須使用命令和網格放置屬性來實現內容的視覺化、非邏輯、重排。使用這些特性來執行邏輯重排的樣式表是不一致的。— 網格規範：重新排序和可訪問性

這並不是網格獨有的，然而，如此容易地在兩個維度中重新排列內容的能力使得它成為網格的一個更大的問題。但是，如果使用任何允許內容重新排序的方法--無論是Grid、Flexbox還是絕對定位--您需要注意不要將視覺體驗與文件中內容的結構聯絡起來。螢幕閱讀器(以及僅使用鍵盤在文件中導航的人員)將按照源中項的順序進行操作。

在使用時需要特別小心的地方flex-direction在Flexbox中反轉順序；order屬性在Flexbox或Grid中；使用任何方法放置網格項，如果它將專案移出文件中的邏輯順序；以及使用grid-auto-flow.

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

網格佈局和可訪問性-MDN

Flexbox與鍵盤導航斷開

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

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

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

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

您定義的網格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 1fr 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級希望能解決。巢狀網格現在變成了一個新網格，因此您需要小心調整大小以確保它與任何父音軌相一致。

您可以在一個頁面上擁有許多網格

調查中出現了幾次評論，令我吃驚的是，似乎有一個想法認為網格應該侷限於主佈局，而一個頁面上的許多網格可能不是一個好東西。您可以擁有儘可能多的網格，您喜歡！使用網格來做大事情和小事情，如果它把意義放在網格上，然後使用網格。

支援舊瀏覽器

在調查中，許多人提到了舊瀏覽器，但是，那些認為支援老瀏覽器很難的人之間有著相當平等的分歧，那些認為由於功能查詢和網格覆蓋其他佈局方法而感到輕鬆的人。使用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舊習慣

這是我第一次使用網格佈局，所以有很多概念要學習，屬性理解。”從概念上講，我發現最困難的事情是忘掉我多年來做過的所有事情，比如清理漂浮物，把所有東西打包在集裝箱裡。

— 希德工作

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

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

為了包裝，這裡有一個非常簡短的列表當前最佳實踐！如果你發現了那些在你自己情況下做或不起作用的事情，那麼請把它們新增到評論中。

要非常清楚內容重新排序的可能性。檢查您沒有斷開來自文件順序的視覺化顯示。

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

不要忘記，舊的佈局方法仍然有效和有用。嘗試不同的方式來實現模式。不要因為不得不使用Grid而結束通話。

知道，作為一個經驗豐富的前端開發人員，您可能會對佈局如何工作有一個整體的先入為主的看法。試著重新審視這些新方法，而不是強迫它們回到舊模式。

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

在這裡給大家分享一下，我是一名5年前端工程師，自己建了一個q群： 731771211 ， 從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入

點選：