越來越常見的問題-現在人們正在使用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. 繼續試著去做。我們都是新來的。測試你的工作并分享你所發現的東西。

6. >>>>閱讀全文