CSS 中文開發手冊

網格佈局與其他佈局方法的關係 | CSS Grid Layout: Relationship of Grid Layout (Grid Layout) - CSS 中文開發手冊

CSS網格佈局被設計為與CSS的其他部分一起工作，作為完成佈局的完整系統的一部分。在本指南中，我將解釋網格是如何與您可能已經使用的其他技術結合在一起的。

網格和撓曲箱

CSS網格佈局與CSS Flexbox佈局柔性箱是為一維佈局而設計的嗎？或一列。網格是為二維佈局，行和列同時佈局而設計的.。然而，這兩種規範有一些共同的特性，如果您已經學習瞭如何使用Flexbox，那麼希望您能夠看到幫助您掌握Grid的相似之處。

一維與二維佈局

一個簡單的例子可以說明一維和二維佈局的區別。

在第一個例子中，我使用Flexbox來佈局一組盒子。我在我的容器中有五個子專案，我給出了FLEX屬性值，這樣它們就可以從200畫素的彈性基礎上生長和收縮。

我還設定了flex-wrap財產wrap這樣，如果容器中的空間變得太窄，無法維護FLEX基礎，則專案將被包裝到新的行上。

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

.wrapper {
   display: flex;
   flex-wrap: wrap;
}
.wrapper > div {
   flex: 1 1 200px;
}

在影象中，您可以看到兩個專案已包裝到一個新的行。這些專案共享可用空間，而不是在上面的專案下面排隊。這是因為當您包裝FLEX項時，每一行%28或每列在按列%29工作時都會成為一個新的FLEX容器。空間分佈發生在行的兩側。

一個常見的問題是如何使這些專案排列起來。這就是您需要二維佈局方法的地方：您希望通過行和列來控制對齊，這就是網格出現的地方。

CSS網格的相同佈局

在下一個示例中，我使用Grid建立相同的佈局。這次我們有三個1fr柱軌。我們不需要在專案本身上設定任何東西；它們會將自己放置到建立的網格的每個單元中。正如您所看到的，它們保持在一個嚴格的網格中，排列成行和列。有五個專案，我們在第二行的末尾有一個缺口。

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
}

在決定網格還是柔性箱時，一個簡單的問題是：

我只需要按行控制佈局嗎？或列-使用撓曲盒我需要按行控制佈局嗎？和列-使用網格

內容還是佈局？

除了一維和二維的區別之外，還有另一種方法來決定是否應該使用柔性盒或網格來進行佈局。Flexbox從內容開始工作。柔性箱的一個理想的用例是，當您有一組專案，並希望將它們均勻地放置在容器中時。您可以讓內容的大小決定每一項佔用的單獨空間。如果專案換到一個新行，它們將根據其大小和可用空間計算出它們的間距。在那條線上...

網格從佈局開始工作。當您使用css網格佈局時，您建立一個佈局，然後將專案放入其中，或者允許自動放置規則根據嚴格的網格將專案放置到網格單元格中。有能力建立的軌道，以響應的大小的內容，但他們也將改變整個軌道。

如果您正在使用Flexbox，並且發現自己禁用了一些靈活性，那麼您可能需要使用CSSGrid佈局。一個例子是，如果您正在為一個FLEX專案設定一個百分比寬度，使其與上面一行中的其他項對齊。在這種情況下，網格可能是一個更好的選擇。

盒對齊

最令我們興奮的是，柔韌性盒的特點是它首次給了我們正確的對齊控制。這使得在頁面上居中一個框變得容易了。FLEX項可以伸展到FLEX容器的高度，這意味著可以使用等高列。這些都是我們很長時間以來一直想做的事情，並且想出了各種方法來創造視覺效果。

柔性盒規範中的對齊屬性已新增到一個名為盒對齊級別3這意味著它們可以用於其他規範，包括網格佈局。將來，它們也可以應用於其他佈局方法。

在本系列的後續指南中，我將適當地瞭解Box對齊以及它在網格佈局中的工作方式。然而，這裡有一個比較柔性箱和網格的簡單例子。

在第一個例子中，它使用了Flexbox，我有一個容器，裡面有三個條目。包裝器min-height設定，因此它定義了FLEX容器的高度。我已經準備好了align-items在Flex容器上flex-end因此，這些專案將在FLEX容器的末尾排隊。我還設定了align-self財產上box1因此，它將覆蓋預設值，並伸展到容器的高度和box2因此它對齊了Flex容器的開始。

<div class="wrapper">
   <div class="box1">One</div>
   <div class="box2">Two</div>
   <div class="box3">Three</div>
</div>

.wrapper {
   display: flex;
   align-items: flex-end;
   min-height: 200px; 
}
.box1 {
   align-self: stretch;
}
.box2 {
   align-self: flex-start;
}

CSS網格對齊

第二個例子使用網格建立相同的佈局。這一次，我們使用框對齊屬性，因為它們適用於網格佈局。所以我們要start和end而不是flex-start和flex-end在網格佈局的情況下，我們對齊它們的網格區域內的專案。在這種情況下，這是一個單一的網格單元，但它可以是一個區域由幾個網格單元。

<div class="wrapper">
   <div class="box1">One</div>
   <div class="box2">Two</div>
   <div class="box3">Three</div>
</div>

.wrapper {
   display: grid;
   grid-template-columns: repeat(3,1fr);
   align-items: end;
   grid-auto-rows: 200px;
}
.box1 {
   align-self: stretch;
}
.box2 {
   align-self: start;
}

fr單位和flex-basis

我們已經看到fr單元的工作是將網格容器中可用空間的一部分分配給我們的網格軌道。大fr單位，當與minmax()函式可以給出非常類似於flex屬性在柔性盒-同時仍然能夠建立一個二維佈局。

如果我們回顧一下我演示了三維佈局之間的差異的例子，您會發現這兩種佈局的工作方式是不同的。使用FLEX佈局，如果我們將視窗拖得越來越寬，那麼FLEX框就很好地處理了根據可用空間調整每一行中的專案數的問題。如果我們有很大的空間，所有的五個專案都可以容納在一行，如果我們有一個非常狹窄的容器，我們可能只有一個空間。

相比之下，網格版本總是有三條列軌。軌道本身將增長和縮小，但總有三個，正如我們要求的三個在定義我們的網格。

自動填網軌道

通過使用重複表示法和auto-fill和auto-fit財產。

在下一個示例中，我使用了auto-fill關鍵字替換重複表示法中的整數，並將軌道列表設定為200畫素。這意味著網格將建立多達200畫素的列軌跡，以適應容器。

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
</div>

.wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fill, 200px);
}

靈活的軌道數目

這和柔性箱不太一樣。在柔性盒示例中，專案在包裝前大於200畫素基礎。我們可以在網格中通過合併來實現相同的目標。auto-fill而minmax()功能。在下一個示例中，我使用minmax.我希望我的音軌至少是200畫素，然後我把最大的1fr一旦瀏覽器計算出了200畫素放入容器中的次數--同時考慮到網格間隙--它將處理1fr最大限度地作為在專案之間分配剩餘空間的指示。

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
</div>

.wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

我們現在可以建立一個具有靈活數量的靈活軌道的網格，但是可以看到網格上的專案同時按行和列排列。

網格和絕對定位元素

網格與絕對定位的元素進行互動，如果要將項放置在網格或網格區域中，這將非常有用。該規範定義了網格容器是包含塊時的行為，以及網格容器是絕對定位項的父項的行為。

作為包含塊的網格容器

要使網格容器成為包含塊，您需要向容器中新增一個相對值的位置屬性，就像為任何其他絕對定位的項建立包含塊一樣。一旦您完成了此操作，如果您給出了一個網格項position:absolute它將把網格容器作為其包含的塊，或者，如果專案也有網格位置，則將其放置到的網格中。

在下面的示例中，我有一個包含四個子項的包裝器。第三項是絕對定位的，並且也使用基於線的佈局放置在網格上。網格容器position:relative因此成為這個專案的定位上下文。

<div class="wrapper">
   <div class="box1">One</div>
   <div class="box2">Two</div>
   <div class="box3">
    This block is absolutely positioned. In this example the grid container is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the area it has been placed into.
   </div>
   <div class="box4">Four</div>
</div>

.wrapper {
   display: grid;
   grid-template-columns: repeat(4,1fr);
   grid-auto-rows: 200px;
   grid-gap: 20px;
   position: relative;
}
.box3 {
   grid-column-start: 2;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
   position: absolute;
   top: 40px;
   left: 40px;
}

您可以看到，該項將從網格行第2行到第4行，並從第1行之後開始。然後，使用頂部和左側屬性在該區域進行偏移。然而，它已經被從流程中拿出來了，因為通常是絕對定位的物品，所以自動放置規則現在把物品放置在相同的空間裡。該項也不會導致建立額外的行以跨越第3行。

如果我們把position:absolute從規則.box3您可以看到它在沒有定位的情況下將如何顯示。

作為父級的網格容器

如果絕對定位的子節點有一個網格容器作為父容器，但是該容器沒有建立新的定位上下文，那麼它就會像前面的示例一樣從流中取出。定位上下文將是任何元素建立的定位上下文，這與其他佈局方法相同。在我們的情況下，如果我們刪除position:relative從上面的包裝器中，定位上下文來自viewport，如下圖所示。

再一次，該專案不再參與網格佈局的大小調整或其他專案是自動放置。

以網格區域作為父區域。

如果絕對定位項巢狀在網格區域內，則可以在該區域上建立定位上下文。在下面的例子中，我們像以前一樣有網格，但是這次我在裡面嵌套了一個條目.box3在電網裡。

我給了.box3定位相對項，然後使用偏移量屬性定位子項。在這種情況下，定位上下文是網格區域。

<div class="wrapper">
   <div class="box1">One</div>
   <div class="box2">Two</div>
   <div class="box3">Three
       <div class="abspos">
        This block is absolutely positioned. In this example the grid area is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the grid area.
       </div>
   </div>
   <div class="box4">Four</div>
</div>

.wrapper {
   display: grid;
   grid-template-columns: repeat(4,1fr);
   grid-auto-rows: 200px;
   grid-gap: 20px;
}
.box3 {
   grid-column-start: 2;
   grid-column-end: 4;
   grid-row-start: 1;
   grid-row-end: 3;
   position: relative;
}
.abspos {
   position: absolute;
   top: 40px;
   left: 40px;
   background-color: rgba(255,255,255,.5);
   border: 1px solid rgba(0,0,0,0.5);
   color: #000;
   padding: 10px;
}

網格和display:contents

與另一個值得注意的佈局規範的最後互動是CSS網格佈局和display:contents...contents屬性中描述的新值。顯示規格詳情如下：

“元素本身不生成任何框，但是它的子元素和偽元素仍然生成正常的框。為了生成框和佈局，必須將元素視為文件樹中的子元素和偽元素。“

如果您將專案設定為display:contents它通常會建立的框消失了，子元素的框看起來就好像它們已經上升了一個級別。這意味著網格項的子元素可以成為網格項。聽起來很奇怪？下面是一個簡單的例子。在下面的標記中，我有一個網格，網格上的第一個項被設定為跨越所有三個列軌道。它包含三個巢狀項。由於這些項不是直接子元素，因此它們不會成為網格佈局的一部分，因此使用常規塊佈局來顯示。

<div class="wrapper">
   <div class="box box1">
       <div class="nested">a</div>
       <div class="nested">b</div>
       <div class="nested">c</div>
   </div>
   <div class="box box2">Two</div>
   <div class="box box3">Three</div>
   <div class="box box4">Four</div>
   <div class="box box5">Five</div>
</div>

.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: minmax(100px, auto);
}
.box1 {
   grid-column-start: 1;
   grid-column-end: 4;
}

如果我現在加上display:contents對……的規則box1，該專案的框消失了，子項現在成為網格項，並使用自動放置規則自行佈局。

<div class="wrapper">
   <div class="box box1">
       <div class="nested">a</div>
       <div class="nested">b</div>
       <div class="nested">c</div>
   </div>
   <div class="box box2">Two</div>
   <div class="box box3">Three</div>
   <div class="box box4">Four</div>
   <div class="box box5">Five</div>
</div>

.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: minmax(100px, auto);
}
.box1 {
   grid-column-start: 1;
   grid-column-end: 4;
   display: contents;
}

這可以使巢狀在網格中的項充當網格的一部分，並且是解決子網格實現後將解決的一些問題的一種方法。您也可以使用display:contents以類似的方式使用Flexbox，使巢狀的項成為FLEX項。

從本指南中可以看到，CSS網格佈局只是工具包的一部分。不要害怕把它和其他的佈局方法混合起來，以獲得你需要的不同效果。

  CSS 中文開發手冊