HTML5+CSS3

2021.6HTML5andCSS3第12章

網格布局基礎概念劃分網格放置網格項設置網格項的對齊方式設置行間隔和列間隔justify-content屬性值的設置DEMO：用Grid實現圣杯布局DEMO：計算器第12章

網格布局

第12章

網格布局基礎概念網格容器和網格項網格線行、列、單元格和網格區域第12章

網格布局網格容器和網格項使用網格進行頁面布局，兩個核心概念是“網格容器”(GridContainer)和“網格項”（GridItem），我們需要先將某DOM元素指定為“網格容器”，然后將若干待定位的元素指定為“網格項”。網格容器通過將某元素設為display:grid（在行內時使用display:inline-grid）來指定，它的直接后代是網格項，示例代碼如下。第12章

網格布局網格線網格由若干橫縱垂直相交的線條劃分而成。如圖所示，這個4行5列的網格有5條水平網格線和6條豎直網格線。一般情況下，n行m列的網格有n+1條水平網格線和m+1條垂直網格線。第12章

網格布局行、列、單元格和網格區域被網格線包裹這個區域有3種：行：指相鄰兩條水平網格線之間的空間。列：指相鄰兩條垂直網格線之間的空間。單元格：行和列相交的區域是單元格。由4條網格線包裹的空間是網格區域，網格區域是一個矩形，網格區域包含若干單元格。行、列、單元格和網格區域是虛擬的，不對應任何DOM元素。第12章

網格布局劃分網格網格容器的grid-template-rows,grid-template-columns屬性是用來劃分網格的。最簡單的方式就是逐一設定每個單元格的寬度和高度。第12章

網格布局劃分網格如果行列太多，逐一重復書寫寬度和高度比較麻煩，可以用repeat函數來簡化，上述例子可以寫成以下形式。第12章

網格布局劃分網格網格布局中引入了一種新的尺寸單位fr，它表示一種比例關系，1fr表示占剩余空間（fractionoftheleftoverspace）的1等份。剩余空間是如何計算的呢？列的剩余空間是網格容器的寬度減去其他非fr尺寸定義的列寬之和。下面舉3個小例子說明：假設容器的寬度是200px，不同劃分方式產生的不同結果。第12章

網格布局放置網格項使用網格區域名稱定位使用網格線數字定位使用網格名稱定位自動定位auto第12章

網格布局使用網格區域名稱定位有時網格項需要跨單元格放置，即放置在網格區域中。為了指定網格區域，需要先給網格區域命名，使用網格容器的grid-template-areas屬性，給每個單元格取一個名稱，它可以是如下三種值。名稱，相同名稱的單元格組成一個網格區域；.，表示單元格不利用，空著不放元素；none，表示未定義。第12章

網格布局使用網格區域名稱定位例如定義如下網格，在20個單元格中，一共出現了4種名字，a1、a2、a3和a4，并且每個名字對應的單元格組合在一起正好都能成為一個矩形。這樣的劃分就是有效的劃分，每一個矩形就能夠形成一個網格區域。將數字1放入a1區域，數字2放入a3區域，數字3放入a4區域，其余數字未定義，自動擺放。第12章

網格布局使用網格線數字定位除了上面介紹的用名字對網格進行劃分之外，還可以通過定義網格項的起始位置來定位，需要使用網格項的grid-column-start,grid-column-end,grid-row-start,grid-row-end四個屬性。第12章

網格布局使用網格線數字定位數字表示第幾條網格線，網格線從左往右從上到下是從1開始計數，依次加1。倒過來（即從下向上數）則是從-1開始計數，依次減1，圖12.4中顯示的很清楚。結束位置還可以用相對位置，規則是span<number>，表示跨幾行或幾列。第12章

網格布局使用網格名稱定位網格線除了用數字表示，還可以用名稱來表示，需要在劃分網格時定義網格線的名稱，然后在網格項中使用。網格線名稱用中括號[]定義，一個簡單的例子，代碼如下。第12章

網格布局自動定位auto在CSS3中，還可以讓未指定的網格項自動地與單元格相匹配。具體原則是，先把人為指定的網格項與網格區域匹配好，剩下未指定的網格項會自動匹配，做法是將未人為指定的網格項依次放入下一個可用的空單元格中。默認情況下，網格項從左往右、從上到下依次放入單元格中。可以通過容器的grid-auto-flow屬性來改變它，它的規則如下。row表示按行左往右放置，是默認值column表示按列從上到下放置dense表示盡可能不留空格地緊密擺放，因為有些網格項會跨單元格，導致空出單元格第12章

網格布局設置網格項的對齊方式（垂直對齊）網格容器的align-items屬性能夠用來設置網格項的垂直對齊方式，它的值有四種：stretch：默認值，占滿單元格。如果網格項未設置高度，則它的高度等于單元格的高度。start：對齊單元格的上側。center：垂直居中對齊。end：對齊單元格的下側。第12章

網格布局設置網格項的對齊方式（水平對齊）網格容器的justify-items屬性能夠用來設置網格項的水平對齊方式，它的值和align-items一致，也有四種。stretch：默認值，占滿單元格。如果網格項未設置寬度，則它的寬度等于單元格的寬度。start：對齊單元格的左側。center：水平居中對齊。end：對齊單元格的右側。第12章

網格布局設置行間隔和列間隔row-gap和column-gap這兩個屬性相對簡單，它們的作用分別是設置行間隔和列間隔。例如行間隔設為10px，列間隔設為15px，這時網格項的寬度是80px，效果如圖所示。如果將網格項的寬度設為90px，則會超出容器邊界，效果如圖所示。第12章

網格布局設置行間隔和列間隔row-gap和column-gap定義了間隔的尺寸，有時我們希望剩余空間能夠自動分配，這時可以使用網格容器的justify-content和align-content屬性。justify-content屬性值的說明屬性值說明space-between列之間的間隔相等，列與容器邊框之間沒有間隔space-evenly列之間的間隔相等，并且等于列與容器邊框之間的間隔space-around每個列兩側的間隔相等，并且是列與容器邊框之間的間隔的2倍stretch默認值，列沒有指定寬度時，會占滿單元格的整個寬度start整個居左對齊center整個居中對齊end整個居右對齊第12章

網格布局justify-content屬性值示例第12章

網格布局動手練習：用Gri