隨著 igalia 在 chromium/blink 以及 safari/webkit瀏覽器實現css網格布局的部分工作的完成，我們已經實現了對於定位網格項(positioned items)的支援。是的，在網格中支援絕對定位。
可能你的第一反應是不希望在網格布局中使用定位的網格項，但是可能在某些使用案例中必須要使用它們。這篇文章主要用來解釋定位網格項在網格容器(grid container)中的特殊性。
實際上，定位網格項跟普通網格項(regular items)相比並沒有那麼大的區別。當網格容器是定位項的包含塊時(例如，在網格容器中使用相對定位 position: relative; )，這些定位網格項在頁面的布局與普通網格項基本是相同的。但是，還是有少許的不同：
定位網格項預設不能延伸(stretch)。
它們不能使用隱式網格。 它們不會建立隱式軌道。
使用自動布局功能時，它們不占用單元格。
auto 與網格線(grid lines)相關的時候有特殊的含義。
讓我們詳細介紹一下這些功能。
定位網格項會收縮到內容的寬高
我們都知道普通網格項預設可以延伸來填充它們的區域。然而，定位網格項並不是這樣，類似於定位的普通塊級元素，它們會收縮到內容的寬高。
這點很容易理解，但是乙個簡單的例子能讓它更加清楚明了：
在這個例子中，我們有乙個簡單的 2x2 的網格。普通網格項和定位網格項都設定了佔滿整個網格的css規則。這定義了這些網格項的_區域_包括第一行和第二行以及第一列和第二列。
普通網格項預設在水平和垂直方向都會延伸，所以它們會佔據整個網格區域。然而，定位網格項會產生塌陷，它們的尺寸會根據內容來縮小。
在下面的例子中，我會忽略這個不同點以便能展示每個定位網格項所佔據的區域。要實現跟一樣的結果，你需要將定位網格項的寬高設定為 100% 。
定位網格項和隱式網格(implicit grid)
定位網格項不參與網格的布局，也不會影響到其他元素的放置。
你可以在顯式網格(explicit grid)外部放置乙個普通網格項，網格為了容納元素會建立需要的軌道。然而，對於定位網格項來說，你甚至無法參考隱式網格的網格線，它們會被預設為根據 auto 屬性來放置。這意味著你在隱式網格中不能放置定位元素。它們由於不參與網格的布局所以無法建立隱式軌道(implicit tracks)。
讓我們通過乙個例子來更好的理解這一點：
這個例子中我們定義了乙個 2x2 的網格，但是定位網格項指定的網格區域為 grid-area: 4 / 4; 所以它嘗試去找第四行和第四列。然而定位網格項不能建立隱式軌道。所以，它像被設定了 auto 一樣進行放置，在這個例子中會佔據整個顯式網格。auto 對於絕對定位項有特殊的含義，後面我們會進行詳細解釋。
假設另外乙個普通網格項建立隱式軌道的例子：
在這個例子中，普通網格項會建立隱式軌道，產生乙個 4x4 的網格。這時候定位網格項就可以放置在第四行第四列的位置，即便這些列在隱式網格中。
本文的這部分已經被修改過了，在此感謝@fantasai指出我的錯誤。
定位網格項和布局演算法
再強調一次，定位網格項由於不參與布局演算法，所以不會影響其他元素的布局。
下面是乙個簡單的例子來解釋這個行為：
這裡我們又建立了乙個 2x2 的網格，它有三個自動放置的的普通網格項以及乙個絕對定位網格項。你可以看到，這個定位網格項被放置在第一行第二列，但是在這個單元格中定位網格項的下面還有乙個自動放置的普通網格項。這說明網格容器在放置普通網格項的時候並不會考慮定位網格項，會忽略它。
如果所有的子元素都沒有進行定位，最後乙個元素就會在它預設的位置(第一行第二列)，其他自動放置的元素會佔據其他單元格，不會產生覆蓋。
定位網格項和自動網格線(auto lines)
這可能是定位網格項跟普通網格項相比最大的區別。如果你沒有指定網格線，那會被認為設定了 auto 值， 但是 auto 並不會像普通網格項一樣被當做 span 1 來處理。對於定位網格項來說auto被認為是內邊距(padding)的邊緣。
規範介紹了網格線 0 和 -0 的概念，儘管聽起來有點奇怪，但是它們確實是很有意義的。 auto 網格線會引用名稱為 0 和 -0 的網格線，它們代表了網格容器的內邊距邊緣。
讓我們再用幾個例子來解釋一下：
現在我們有乙個 2x2 的網格容器，它設定了內邊距。定位網格項將被放置在第二行第一列，由於設定了 auto 屬性，它的區域會延伸到內邊距的邊緣。
我們甚至可以將定位網格項放置在內邊距裡面。例如使用 「grid-column: auto / 1;」 ，網格項就會被放置在左側內邊距中。
當然，如果網格容器更寬，content box還有一些空白區域，那麼定位網格項也會佔據那些空白區域。例如:
這個例子中網格的列總共寬 500px，但是網格容器的寬度為 600px。這意味著在網格內容區域中有 100px 的空白區域。從這個例子可以看到，這部分區域在定位網格項延伸到內邊距邊緣的時候也會被占用。
偏移量(offsets)
當然，你也可以使用偏移量來放置定位網格項(left, right, top 以及 bottom 屬性)。
定位網格項會遵循上面的規則建立網格區域，這些偏移量會應用在網格區域內部。
讓我們來看另乙個例子：
還是乙個具有內邊距的 2x2 的網格容器。定位網格項在它的網格區域中有一些偏移。
總結我不是很確定對於使用網格布局的web開發者來說，支援定位元素有多重要。如果你發現某種情況下確實要用到這些的話，請一定要告訴我。我希望這篇文章能幫助你更好地理解它，同時注意到現實生活中可能會用到它們的場景。
好訊息是 你已經可以在大多數主流瀏覽器的最近幾個版本中測試以上內容了：chrome canary, safari technology preview 以及 firefox。我們希望這三個瀏覽器的實現都是可操作的，但是如果你發現什麼問題一定要告訴我們。
還有一件事情：定位網格項對於'對齊'的支援。這一點在所有瀏覽器都還沒有被支援，但是這種行為跟你使用的普通網格項是很相似的。我們將會在今後的幾個月裡實現它，這是很有希望的。
css 網格布局 CSS網格布局簡介
css 網格布局 css在不斷發展。目前正在談論的某些功能可能會在不久的將來成為主流，而其他功能可能會逐漸淡出人們的視線。無論哪種方式，了解將來考慮使用哪些css選擇器，布局模組和過濾器都將使您成為更強大的前端開發人員。網格布局是一種很快就會被廣泛接受的選擇。您可以想象，css的這一子集可以簡化內容...
CSS網格布局
網格分析 n行n列組成網格 拐來拐去又變為 在css布局中我們只需要實現一行n列效果，然後組成多行多列 必須調整全域性盒模型 響應式網格檢視通常是 每行12 列，行寬度為100 行 列在瀏覽器視窗大小調整時會自動伸縮 由此我們可以計算出每列的百分比 100 12 列 8.33 在每列中指定 clas...
CSS 網格布局
css網格布局引入了二維網格布局系統，可用於布局頁面主要的區域布局或小型元件。本文介紹了css網格布局 與 css網格布局規範 level 1 中的新術語。css網格布局和彈性盒布局的主要區別在於彈性盒布局是為一維布局服務的 沿橫向或縱向的 而網格布局是為二維布局服務的 同時沿著橫向和縱向 這兩個規...