（中職）Web前端設計基礎 項目十電子課件

1、YCF正版可修改PPT（中職）Web前端設計基礎 項目十電子課件CSS 3創(chuàng)建網(wǎng)格布局項目十授課教師：姓名WEB前端設計基礎Contents1.項目描述2.知識準備3.項目實施4.項目拓展5.項目小結6.技能訓練一 項目描述本項目學習要點網(wǎng)格項元素屬性；創(chuàng)建雙飛翼布局。網(wǎng)格布局的術語；網(wǎng)格容器的屬性；如何創(chuàng)建網(wǎng)格布局；二 知識準備CSS一直用來布局網(wǎng)頁，但一直以來都存在這樣或那樣的問題。一開始我們用表格（table），然后是浮動（float），再是定位（postion）和內嵌塊（inline-block），但是所有這些方法本質上都是只是hack而已，并且遺漏了很多重要的功能（例如垂直居中）。后

2、來，F(xiàn)lexbox在很大程度上改善了布局方式，但它是為了解決更簡單的一維布局，而不是復雜的二維布局。Grid布局是專門為了解決二維布局問題而創(chuàng)建的CSS模塊，是有史以來最強大的CSS模塊之一。二 知識準備網(wǎng)格布局的重要術語；子元素網(wǎng)格項的屬性。父元素網(wǎng)格容器屬性；網(wǎng)格布局的重要術語1網(wǎng)格容器和網(wǎng)格項網(wǎng)格容器任何應用display屬性值為grid的元素就是網(wǎng)格容器，是所有網(wǎng)格項（Grid Items）的父級元素。網(wǎng)格項網(wǎng)格容器（Grid Container）的子元素（例如直接子元素）。網(wǎng)格布局的重要術語1網(wǎng)格容器和網(wǎng)格項【例10-1】創(chuàng)建具有3個子元素的網(wǎng)格容器，代碼如下所示（示例文件10-1.

3、html）。網(wǎng)格容器和網(wǎng)格項/*只要display的值為grid，這個元素就是網(wǎng)格容器*/.containerdisplay:grid;第1個網(wǎng)格項第2個網(wǎng)格項第3個網(wǎng)格項網(wǎng)格布局的重要術語2網(wǎng)格線構成網(wǎng)格結構的分界線。它們既可以是垂直的，也可以是水平的，并位于行或列的任一側，如圖所示黃線就是一條列網(wǎng)格線。網(wǎng)格布局的重要術語3網(wǎng)格軌道兩條相鄰網(wǎng)格線之間的空間。可以把它們想象成網(wǎng)格的列或行。如圖所示的第二條和第三條行網(wǎng)格線之間的就是網(wǎng)格軌道。網(wǎng)格布局的重要術語4網(wǎng)格單元格兩個相鄰的行和兩個相鄰的列網(wǎng)格線之間的空間。這是網(wǎng)格系統(tǒng)的一個“單元格”。如圖所示，第1至第2條行網(wǎng)格線和第2至第3條列網(wǎng)格線

4、交匯構成的就是網(wǎng)格單元格。網(wǎng)格布局的重要術語5網(wǎng)格區(qū)域四條網(wǎng)格線包圍的總空間。一個網(wǎng)格區(qū)域可以由任意數(shù)量的網(wǎng)格單元格組成。如圖所示，第1條到第3條行網(wǎng)格線和第1條到第3條列網(wǎng)格線之間的就是網(wǎng)格區(qū)域。父元素網(wǎng)格容器屬性1display屬性將元素定義為網(wǎng)格容器，并為其內容建立新的網(wǎng)格格式。display屬性值如表所示。Display屬性含義grid生成一個塊級網(wǎng)格inline-grid生成一個內聯(lián)網(wǎng)格subgrid表示網(wǎng)格容器本身是另一個網(wǎng)格的網(wǎng)格項（即嵌套網(wǎng)格）父元素網(wǎng)格容器屬性1display屬性需要注意：在網(wǎng)格容器(Grid Container)上使用column，float，clear，v

5、ertical-align不會產生任何效果。.containerdisplay:grid|inline-grid|subgrid;CSS代碼格式如下：父元素網(wǎng)格容器屬性2grid-template-columns和grid-template-rows屬性使用空格分隔的值列表，用來定義網(wǎng)格的列和行。這些值表示網(wǎng)格軌道大小，它們之間的空格表示網(wǎng)格線。屬性值為：（1） ：可以是長度值、百分比或者等份網(wǎng)格容器中可用空間( fr單位）（2） ：可以選擇的任意名稱.container grid-template-columns: . | .; grid-template-rows: . | .;CSS代碼

6、格式如下：父元素網(wǎng)格容器屬性【例10-2】創(chuàng)建一個3行5列的網(wǎng)格布局（示例文件10-2.html）。.containerdisplay:grid;height: 300px;grid-template-columns: 40px 50px auto 50px 40px;grid-template-rows: 25% 100px auto;grid-gap: 10px;.container divbackground-color: green;父元素網(wǎng)格容器屬性【例10-2】創(chuàng)建一個3行5列的網(wǎng)格布局（示例文件10-2.html）。123456789101112131415在chrome瀏覽器中

7、預覽父元素網(wǎng)格容器屬性當在網(wǎng)格軌道(Grid Track)值之間留出空格時，網(wǎng)格線會自動分配數(shù)字名稱，如圖所示。父元素網(wǎng)格容器屬性也可以明確的指定網(wǎng)格線(Grid Line)名稱，即值，如圖所示。父元素網(wǎng)格容器屬性請注意網(wǎng)格線名稱的括號語法，修改例10-2中的第7-13行。.containerdisplay:grid;height: 300px;background-color: #000;grid-template-columns: first40pxline250pxline3autocol4-start50pxfive40pxend;grid-template-rows: row1-st

8、art25%row1-end100pxthird-lineautolast-line;grid-gap: 10px;.container divbackground-color: green;父元素網(wǎng)格容器屬性fr單位是指用等分網(wǎng)格容器剩余可用空間來設置網(wǎng)格軌道的大小。例如，下面的代碼會將每個網(wǎng)格項設置為網(wǎng)格容器寬度的三分之一。.containergrid-template-columns:1fr 1fr 1fr;剩余可用空間是除去所有非靈活網(wǎng)格項之后計算得到的。在上面的例子中，可用空間總量減去50px后，再給fr單元的值三等分：.containergrid-template-columns:

9、1fr 50px 1fr 1fr;父元素網(wǎng)格容器屬性3grid-template-areas屬性通過引用grid-area屬性指定網(wǎng)格區(qū)域名稱來定義網(wǎng)格模板。重復網(wǎng)格區(qū)域的名稱導致內容跨越這些單元格。一個點號（.）代表一個空的網(wǎng)格單元。這個語法本身可視作網(wǎng)格的可視化結構。grid-template-areas屬性值如表所示。grid-template-areas屬性值含義由網(wǎng)格項的grid-area指定的網(wǎng)格區(qū)域名稱.（點號）代表一個空的網(wǎng)格單元none不定義網(wǎng)格區(qū)域父元素網(wǎng)格容器屬性3grid-template-areas屬性【例10-3】創(chuàng)建一個4列3行的網(wǎng)格（示例文件10-3.html）

10、。.containerdisplay: grid;grid-template-columns: 100px 100px 100px 100px;grid-template-rows: 50px 200px 50px;grid-template-areas:header header header headermain main.sidebarfooter footer footer footer;.item1grid-area: header;background-color:blue; .item2grid-area: main;background-color: yellow;.item3

11、grid-area: sidebar;background-color: pink;.item4grid-area: footer;background-color: green;父元素網(wǎng)格容器屬性3grid-template-areas屬性【例10-3】創(chuàng)建一個4列3行的網(wǎng)格（示例文件10-3.html）。headermainsidebarfooter在chrome瀏覽器中預覽父元素網(wǎng)格容器屬性3grid-template-areas屬性【例10-3】創(chuàng)建一個4列3行的網(wǎng)格（示例文件10-3.html）。整個頂行將由header區(qū)域組成。中間一排將由兩個main區(qū)域，一個是空單元格，一個si

12、debar區(qū)域組成。最后一行全是footer區(qū)域組成。父元素網(wǎng)格容器屬性4grid-column-gap和grid-row-gap屬性指定網(wǎng)格線(grid lines)的大小，可以想象為設置列和行之間間距的寬度。但只能在列和行之間創(chuàng)建間距，網(wǎng)格外部邊緣不會有這個間距。屬性值為：長度值。.containergrid-column-gap:;grid-row-gap:;CSS代碼格式如下：父元素網(wǎng)格容器屬性4grid-column-gap和grid-row-gap屬性.containergrid-template-columns:100px 50px 100px;grid-template-row

13、s:80px auto 80px;grid-column-gap:10px;grid-row-gap:15px;效果如圖父元素網(wǎng)格容器屬性5justify-items和align-items屬性justify-items沿著行軸線對齊網(wǎng)格項內的內容，屬性值如表所示。justify-items屬性值start將內容對齊到網(wǎng)格區(qū)域(grid area)的左側end將內容對齊到網(wǎng)格區(qū)域的右側center將內容對齊到網(wǎng)格區(qū)域的中間（水平居中）stretch填滿網(wǎng)格區(qū)域寬度（默認值）父元素網(wǎng)格容器屬性5justify-items和align-items屬性justify-items屬性的CSS代碼格式：

14、.containerjustify-items:start|end|center|stretch;父元素網(wǎng)格容器屬性5justify-items和align-items屬性align-items沿著列軸線對齊，屬性值如表所示；這兩個屬性的值適用于容器內的所有網(wǎng)格項。align-items屬性值含義示例start將內容對齊到網(wǎng)格區(qū)域的頂部end將內容對齊到網(wǎng)格區(qū)域的底部center將內容對齊到網(wǎng)格區(qū)域的中間（垂直居中）stretch填滿網(wǎng)格區(qū)域高度（默認值）父元素網(wǎng)格容器屬性5justify-items和align-items屬性align-items屬性的CSS代碼格式：.containera

15、lign-items:start|end|center|stretch;父元素網(wǎng)格容器屬性6justify-content和align-content屬性justify-content屬性使用情況當網(wǎng)格合計大小可能小于其網(wǎng)格容器的大小時，所有網(wǎng)格項都使用像素這樣的非靈活單位設置大小的情況下，可以設置網(wǎng)格容器內的網(wǎng)格的對齊方式。此屬性沿著行軸線對齊網(wǎng)格，屬性值如表所示。justify-content屬性值含義示例start將網(wǎng)格對齊到網(wǎng)格容器的左邊end將網(wǎng)格對齊到網(wǎng)格容器的右邊center將網(wǎng)格對齊到網(wǎng)格容器的中間（水平居中）父元素網(wǎng)格容器屬性6justify-content和align-co

16、ntent屬性justify-content屬性值含義示例stretch調整網(wǎng)格項的寬度，允許該網(wǎng)格填充滿整個網(wǎng)格容器的寬度space-around在每個網(wǎng)格項之間放置一個均勻的空間，左右兩端放置一半的空間space-between在每個網(wǎng)格項之間放置一個均勻的空間，左右兩端沒有空間space-evenly在每個柵格項目之間放置一個均勻的空間，左右兩端放置一個均勻的空間父元素網(wǎng)格容器屬性6justify-content和align-content屬性justify-content屬性的CSS代碼格式：.containerjustify-content:start|end|center|stre

17、tch|space-around|space-between|space-evenly;父元素網(wǎng)格容器屬性6justify-content和align-content屬性align-content屬性使用情況：網(wǎng)格合計大小可能小于其網(wǎng)格容器的大小時，所有網(wǎng)格項都使用像素這樣的非靈活單位設置大小的情況下，可以設置網(wǎng)格容器內的網(wǎng)格的對齊方式。此屬性沿著列軸線對齊網(wǎng)格，屬性值如表所示。align-content屬性值含義示例start將網(wǎng)格對齊到網(wǎng)格容器的頂部end將網(wǎng)格對齊到網(wǎng)格容器的底部center將網(wǎng)格對齊到網(wǎng)格容器的中間（垂直居中）父元素網(wǎng)格容器屬性6justify-content和alig

18、n-content屬性align-content屬性值含義示例stretch調整網(wǎng)格項的高度，允許該網(wǎng)格填充滿整個網(wǎng)格容器的高度space-around在每個網(wǎng)格項之間放置一個均勻的空間，上下兩端放置一半的空間space-between在每個網(wǎng)格項之間放置一個均勻的空間，上下兩端沒有空間space-evenly在每個柵格項目之間放置一個均勻的空間，上下兩端放置一個均勻的空間父元素網(wǎng)格容器屬性6justify-content和align-content屬性align-content屬性的CSS代碼格式：.containeralign-content:start|end|center|stretc

19、h|space-around|space-between|space-evenly;父元素網(wǎng)格容器屬性7grid-auto-columns和grid-auto-rows屬性指定任何自動生成的網(wǎng)格軌道（又名隱式網(wǎng)格軌道）的大小。在明確定位的行或列（通過grid-template-rows或grid-template-columns）超出定義的網(wǎng)格范圍時，隱式網(wǎng)格軌道被創(chuàng)建了。屬性值為：可以是長度值，百分比，或者等份網(wǎng)格容器中可用空間（fr單位）.containergrid-auto-columns:.;grid-auto-rows:.;CSS代碼格式如下：父元素網(wǎng)格容器屬性7grid-auto-

20、columns和grid-auto-rows屬性創(chuàng)建隱式網(wǎng)格軌道，請看以下的代碼：.containerdisplay:grid;grid-template-columns:60px 60px;grid-template-rows:90px 90px;這樣會生成了一個22的網(wǎng)格。父元素網(wǎng)格容器屬性7grid-auto-columns和grid-auto-rows屬性使用grid-column和grid-row來定位你的網(wǎng)格項，修改為：.item-agrid-column:1/2;grid-row:2/3;.item-bgrid-column:5/6;grid-row:2/3;父元素網(wǎng)格容器屬性7

21、grid-auto-columns和grid-auto-rows屬性效果分析如圖所示：讓item-b從第5條列網(wǎng)格線開始到第6條列網(wǎng)格線結束，但從來沒有定義過第5或第6列網(wǎng)格線因為引用的網(wǎng)格線不存在，所以創(chuàng)建寬度為0的隱式網(wǎng)格軌道以填補空缺父元素網(wǎng)格容器屬性7grid-auto-columns和grid-auto-rows屬性可以使用grid-auto-columns和grid-auto-rows來指定這些隱式軌道的大小：.containergrid-auto-columns:60px;效果分析如圖所示：父元素網(wǎng)格容器屬性8grid-auto-flow屬性如果有一些沒有明確放置在網(wǎng)格上的網(wǎng)格項

22、，自動放置算法會自動放置這些網(wǎng)格項。該屬性控制自動布局算法，屬性值為：（1）row：告訴自動布局算法依次填充每行，根據(jù)需要添加新行。（2）column：告訴自動布局算法依次填入每列，根據(jù)需要添加新列。（3）dense：告訴自動布局算法在稍后出現(xiàn)較小的網(wǎng)格項時，嘗試填充網(wǎng)格中較早的空缺。.containergrid-auto-flow:row|column|rowdense|columndense;CSS代碼為：子元素網(wǎng)格項的屬性1grid-column-start、grid-column-end、grid-row-start和grid-row-end屬性通過指定網(wǎng)格線來確定網(wǎng)格內網(wǎng)格項的位置。

23、grid-column-start和grid-row-start是網(wǎng)格項開始的網(wǎng)格線，grid-column-end和grid-row-end是網(wǎng)格項結束的網(wǎng)格線。屬性值為：（1）：可以是一個數(shù)字引用一個編號的網(wǎng)格線，或一個名字來引用一個命名的網(wǎng)格線。（2）span：該網(wǎng)格項將跨越所提供的網(wǎng)格軌道數(shù)量。（3）span：該網(wǎng)格項將跨越到所提供的名稱位置。（4）auto：表示自動放置，自動跨度，默認會擴展一個網(wǎng)格軌道的寬度或者高度。子元素網(wǎng)格項的屬性1grid-column-start、grid-column-end、grid-row-start和grid-row-end屬性.itemgrid-c

24、olumn-start:|span|span|auto;grid-column-end:|span|span|auto;grid-row-start:|span|span|auto;grid-row-end:|span|span|auto;CSS代碼為：子元素網(wǎng)格項的屬性1grid-column-start、grid-column-end、grid-row-start和grid-row-end屬性.item-agrid-column-start:2;grid-column-end:five;grid-row-start:row1-startgrid-row-end:3例如，如下CSS代碼：效果

25、分析如圖所示：子元素網(wǎng)格項的屬性1grid-column-start、grid-column-end、grid-row-start和grid-row-end屬性.item-bgrid-column-start:1;grid-column-end:spancol4-start;grid-row-start:2grid-row-end:span2又如下CSS代碼：效果分析如圖所示：如果沒有聲明指定grid-column-end和grid-row-end，默認情況下，該網(wǎng)格項將占據(jù)1個軌道。項目可以相互重疊。您可以使用z-index來控制它們的重疊順序。子元素網(wǎng)格項的屬性1grid-column-s

26、tart、grid-column-end、grid-row-start和grid-row-end屬性【例10-4】網(wǎng)格項跨行、跨列和重疊實例（示例文件10-4.html）。.wrapperdisplay: grid;grid-template-columns: 200px 200px 200px;grid-template-rows: 100px 100px 100px; .wrapper divcolor:#fff;font-size: 50px;line-height: 50px;text-align: center;margin: 1px;.item1background-color:

27、#acf888;grid-column: 1/4;.item2background-color: #fe0975;子元素網(wǎng)格項的屬性1grid-column-start、grid-column-end、grid-row-start和grid-row-end屬性【例10-4】網(wǎng)格項跨行、跨列和重疊實例（示例文件10-4.html）。.item3background-color: #5efffa;grid-row-start: 2;grid-row-end: 4;.item4background-color: #e6b4fd;opacity: 0.8;grid-column: 2/4;grid-r

28、ow: 3/4;z-index:0;.item5background-color: #8dfecd;grid-column: 1/3;.item6background-color: #fd9a5c;grid-row: 2/5;grid-column: 3/4;子元素網(wǎng)格項的屬性1grid-column-start、grid-column-end、grid-row-start和grid-row-end屬性【例10-4】網(wǎng)格項跨行、跨列和重疊實例（示例文件10-4.html）。123456在chrome瀏覽器中預覽子元素網(wǎng)格項的屬性2justify-self和align-self屬性justify

29、-self屬性：沿著行軸線對齊網(wǎng)格項內的內容，此值適用于單個網(wǎng)格項內的內容。屬性值為：start：將內容對齊到網(wǎng)格區(qū)域的左側end：將內容對齊到網(wǎng)格區(qū)域的右側center：將內容對齊到網(wǎng)格區(qū)域的中間（水平居中）stretch：填充整個網(wǎng)格區(qū)域的寬度（這是默認值）CSS代碼為：.item-ajustify-self: start|end|center|stretch;子元素網(wǎng)格項的屬性2justify-self和align-self屬性align-self屬性：沿著列軸線對齊網(wǎng)格項內的內容，此值適用于單個網(wǎng)格項內的內容。屬性值為：start：將內容對齊到網(wǎng)格區(qū)域的頂部end：將內容對齊到網(wǎng)格區(qū)域

30、的底部center：將內容對齊到網(wǎng)格區(qū)域的中間（垂直居中）stretch：填充整個網(wǎng)格區(qū)域的高度（這是默認值）CSS代碼為：.itemalign-self:start|end|center|stretch;三 項目實施創(chuàng)建網(wǎng)格布局；創(chuàng)建雙飛翼布局。創(chuàng)建網(wǎng)格布局結合前面學習的知識，用CSS修飾一個用于發(fā)送郵件的表單頁面，如圖所示。創(chuàng)建一個網(wǎng)格，先需要定義一個父級容器（wrapper），在這個容器中放置6個子元素（items）。使用HTML標記，在每個子元素(items)加上了單獨的class名，如圖所示。保存文件名為“10-5.html”。第一步創(chuàng)建網(wǎng)格布局為了能夠清楚的區(qū)分不同的網(wǎng)格，給這6個

31、網(wǎng)格添加不同的樣式，如圖所示。第二步創(chuàng)建網(wǎng)格布局要把父容器（wrapper）變成一個網(wǎng)格(grid)，只要簡單地把其display屬性設置為grid即可，如圖所示。第三步創(chuàng)建網(wǎng)格布局這樣就會得到如圖所示的瀏覽效果。設置網(wǎng)格的Columns(列)和rows(行)，定義網(wǎng)格樣式，通過grid-template-columns和grid-template-rows屬性來設置，如圖所示。第四步創(chuàng)建網(wǎng)格布局可以看到，grid-template-columns屬性有三個值，這樣就會得到三列，值分別表示：第一列的寬度是150px，第二個是20px，第三個是150px。grid-template-rows屬性

32、有兩個值，這樣就會得到兩行。值分別表示：第一行的高度是100px，第二行是100px。在瀏覽器預覽效果如圖所示。為了更好的理解這些值與網(wǎng)格外觀之間的關系，修改屬性的參數(shù)值。將下列代碼修改為2列3行，并且定義第一列寬度200像素、第二列寬度200像素（grid-template-columns:200px 200px;），第一行高度50像素、第二行高度100像素、第三行高度50像素（grid-template-rows:50px 100px 50px;），如圖所示。第五步創(chuàng)建網(wǎng)格布局在瀏覽器預覽修改后的代碼，效果如圖所示。繼續(xù)改變網(wǎng)格的屬性設置，讓item1（子元素）獨占一行，修改item1的c

33、ss屬性，如圖所示。第六步創(chuàng)建網(wǎng)格布局在瀏覽器預覽修改后的代碼，效果如圖所示。上面grid-column-start和grid-column-end的值是指從哪個網(wǎng)格線開始到哪個網(wǎng)格線結束。設置了開始值為1，結束值為4，如圖所示，其中的四條黑色豎線表示列網(wǎng)格線。第六步創(chuàng)建網(wǎng)格布局設置item1占據(jù)從第1條網(wǎng)格線開始，到第4條網(wǎng)格線結束，讓它獨立占據(jù)整行的設置方法就是第21、22行設置列的網(wǎng)格線從1開始（grid-column-start:1;）到4結束（grid-column-end:4;）。用更簡單的縮寫方法來寫上面的語法代碼，來實現(xiàn)上面的效果，如圖所示。第六步創(chuàng)建網(wǎng)格布局為了更加牢固的理解

34、了這個概念，重新排列其他的items(子元素)，如圖所示。第七步創(chuàng)建網(wǎng)格布局在瀏覽器中預覽重新排列后網(wǎng)格布局的效果，如圖所示。第七步創(chuàng)建網(wǎng)格布局用Sublime編輯器，新建一個文件，保存文件名為“10-6.html”。第一步創(chuàng)建雙飛翼布局創(chuàng)建一個類名為“container”的網(wǎng)格容器，設置容器的display屬性為grid，在父容器中創(chuàng)建三個類名稱分別為“l(fā)eft”、“main”、“right”的子元素。如圖所示設置區(qū)塊樣式。第二步第二步創(chuàng)建雙飛翼布局.containerdisplay: grid;grid-template-columns: 100px auto 200px;grid-tem

35、plate-rows:100px 200px 100px;grid-column-gap: 10px;.headerbackground-color: deepskyblue;grid-column: 1/4;.footerbackground-color: deepskyblue;grid-column: 1/4;.leftbackground-color: lightgreen; .mainbackground-color: lightcoral;.rightbackground-color: lightpink;.container divfont-size:60px;text-alig

36、n: center;設置父容器的display屬性為grid定義網(wǎng)格為3列，第一列寬度為100像素、第二列寬度為自動、第三列寬度為200像素定義網(wǎng)格為1行，行高為100像素定義了行和列之間的網(wǎng)格線寬度為10像素第二步創(chuàng)建雙飛翼布局headerleftmainrightfooter在chrome瀏覽器中預覽在父元素“container”下增加兩個類名為“header”、“footer”的子元素，如圖所示；設置網(wǎng)格行為三行：“header”塊位于第一行，行高為100像素；“l(fā)eft”、“main”、“right” 塊位于第二行，行高為200像素；“footer” 塊位于第三行，行高為100像素，如

37、圖所示。第三步創(chuàng)建雙飛翼布局文件另存為“10-7.html”，設置“container”網(wǎng)格容器內的網(wǎng)格項沿行軸的對齊方式為center，設置“main”塊的寬度為600像素，這樣一個水平居中的布局就設置好了。 第四步創(chuàng)建雙飛翼布局.containerdisplay: grid;grid-template-columns: 100px auto 200px;grid-template-rows:100px 200px 100px;grid-column-gap: 10px;justify-content: center;.headerbackground-color: deepskyblue;

38、grid-column: 1/4;.footerbackground-color: deepskyblue;grid-column: 1/4;.leftbackground-color: lightgreen; .mainbackground-color: lightcoral;width: 600px;.rightbackground-color: lightpink;.container divfont-size:60px;text-align: center;文件另存為“10-7.html”，設置“container”網(wǎng)格容器內的網(wǎng)格項沿行軸的對齊方式為center，設置“main”塊的

39、寬度為600像素，這樣一個水平居中的布局就設置好了。 第四步創(chuàng)建雙飛翼布局在chrome瀏覽器中預覽四 項目拓展創(chuàng)建一個2行3列網(wǎng)格布局，網(wǎng)格容器類名為“wrapper”，六個網(wǎng)格子元素類名為“item（n）”，分別設置行高50像素、列寬100像素，網(wǎng)格項寬度5像素，設置元素樣式，如圖所示。第一步四 項目拓展使用等分單位（fr）實現(xiàn)基本的響應式。等分單位允許將容器可用空間分成想要的多個等分空間，然后將每個列更改為一個等分單位寬度，設置grid-template-columns: 1fr 1fr 1fr;實現(xiàn)列寬度自響應，如圖所示。第二步四 項目拓展如果設置grid-template-colum

40、ns: 1fr 2fr 1fr; 那么第 2 列現(xiàn)在將是另外 2 列的 2 倍?？倢挾痊F(xiàn)在是 4 等分，第 2 列占據(jù)了 2 等分，而其他 2 列則各占 1 等分，如圖所示。第二步四 項目拓展更加高級的響應式上面的設置并不是最終想要的響應式，因為這個網(wǎng)格總是包含 3 列。我們希望網(wǎng)格根據(jù)容器的寬度來改變列的數(shù)量。repeat( ) 函數(shù)： 這是指定列和行更強大的方法。把原來的網(wǎng)格改成使用 repeat( )函數(shù)形式來定義。第三步grid-template-columns: 100px 100px 100px;grid-template-rows: 50px 50px;修改為grid-templ

41、ate-columns: repeat(3,100px);grid-template-rows: repeat(2,50px);四 項目拓展設置自適應（auto-fit）。跳過固定數(shù)量的列，而是用 auto-fit 取代 3 ，修改CSS代碼為：第四步.wrapperdisplay: grid;grid-template-columns: repeat(auto-fit,100px);grid-template-rows: repeat(2,50px); grid-gap: 5px;預覽效果如圖所示。四 項目拓展改變?yōu)g覽器的寬度，網(wǎng)格已經(jīng)可以通過瀏覽器（即容器）的寬度來改變列的數(shù)量，盡可能多地

42、將100像素寬的列排列在容器中。當瀏覽器的寬度介于n和n+1之間時（不是子元素塊的整數(shù)倍時），瀏覽器的右側會出現(xiàn)小于105像素的空白區(qū)域。這就是說，將所有列都設為100像素，永遠得不到自適應容器寬度的靈活性。為了解決這個問題，具體方法是minmax( )函數(shù)，只需用minmax(100px, 1fr) 替換100像素即可。第四步四 項目拓展修改CSS代碼為：第四步.wrapperdisplay: grid;grid-template-columns: repeat(auto-fit,minmax(100px,1fr);grid-template-rows: repeat(2,50px); gr

43、id-gap: 5px; 預覽效果如圖所示。四 項目拓展添加圖片，在每個網(wǎng)格項內添加一個img標簽，如圖所示。第五步為了使圖像適合該網(wǎng)格項，將圖像設置為與網(wǎng)格項一樣寬和高，然后使用object-fit: cover;將使圖片覆蓋整個容器，如果需要的話，瀏覽器會裁剪該圖片，設置如圖所示。四 項目拓展實例代碼如下.wrapperdisplay: grid;grid-template-columns: repeat(auto-fit, minmax(192px, 1fr);grid-template-rows: repeat(2,120px); grid-gap: 5px; .wrapper divcolor:#fff;font-size: 50px;line-height: 50px;text-align: center;margin: 1px;img width: 100%;height: 100%;object-fit: cover;四 項目拓展實例代碼如下在chrome瀏覽器中預覽五 項目小結通過項目實施和項目拓展學習了如何創(chuàng)建網(wǎng)格布局、雙飛翼布局和響應式布局三個案例。學習了網(wǎng)格容器、網(wǎng)格項、網(wǎng)格線、網(wǎng)格軌道、網(wǎng)格區(qū)域等網(wǎng)格布局