| 文章簡介：這裡我們指導您使用網格布局來建立一個圖片遊覽庫的燈箱效果。我們使用網格布局組織頁面的內容，和用媒體查詢來最佳化布局，用於橫屏豎屏都能查看。在豎屏中，瀏覽器高度大於其寬度，在橫屏中，瀏覽器寬度大於其高度。 |
毫無疑問，當開發人員談到網頁布局時會有很多選擇。為了確保你的布局可以適應不同裝置、方向和螢幕大小，你需要謹慎考慮清楚，你要使用哪些方法來布局。網格布局是一個新的布局方法，使你可以把網頁的主要區域在遊覽器視窗內設定一個固定大小或者自由空間，你也可以兩個同時使用。
因為網格布局使用您能夠根據列和行對齊，但沒有內給結構，它還使情境像這篇文章中描述的，要麼是不可能或很難用HTML和CSS樣式實現。但你使用網格布局和媒體查詢結合，你可以使你的布局來適應設定變化，比如定位、可用空間等。
CSS網格布局規範還只是一個工作草案，在IE10下使用私人首碼可以支援部分屬性。支援的屬性列表可以查看MSDN上的網格布局。因為網格布局規範依在發展，IE10支援的屬性可能和制定的規範不一定完全相同。
這裡我們指導您使用網格布局來建立一個圖片遊覽庫的燈箱效果。我們使用網格布局組織頁面的內容，和用媒體查詢來最佳化布局，用於橫屏豎屏都能查看。在豎屏中，瀏覽器高度大於其寬度，在橫屏中，瀏覽器寬度大於其高度。
我們希望這個燈箱效果頁面在IE10瀏覽器中佔滿整個螢幕，而不想捲軸出現。當然，這個頁面在IE10中能很好的展示，那麼在Chrome這樣的瀏覽器應該能很好的符合。
下面的圖例接近我們到底希望燈箱頁面的展示效果。我們假設選擇的草圖佔據整個瀏覽器螢幕寬度的16:9。
在這個草圖中，A是一個小地區用來放logo，B地區用來放圖片標題或描述，C地區是主要圖片的瀏覽區，D是縮圖片地區。
因為燈箱頁面旨在查看全屏，所以我們就必須考慮到不同的螢幕大小。頁面的重點就是查看大照片。因此，當螢幕尺寸擴大時，我們也要讓圖片面板C區也擴大。但要防止A區擴張到整個螢幕大，也要防止B區橫向擴張，D區垂直擴張。
這種情境用網格來布局很理想。為了協助構建網格，我們將添加點線來完成不可見的網格線。為了防止頁面元素之間設計顯得太擁擠，我們將給元素之間添加一點間距。間距可以是行和列的固定寬度或高度。
在這個映像中，紫色的虛線代表網格元素或者網格容器。紅色的虛線代表的是網格線。
這是一個五行三列的網格：
讓我們開始寫一個網格標記。首先，我們寫一點簡單的HTML來獲得一個基本結構的頁面。請注意，地區的結構順序並不是按照草圖的結構的建立的，但這是網格布局中的一個優勢：如果你想重新排序，你可以不根據文檔的DOM結構重新排列元素的順序。
<!DOCTYPE html>
<html>
<head>
<meta content="IE=10" http-equiv="X-UA-Compatible" />
<link href="photogallerystyles.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
<div id="body">
<div id="grid">
<div id="text_box" class="orange">Text box</div>
<div id="big_pic" class="red"><img id="mainphoto" alt="mainphoto" src=http://www.webjx.com/css/"images/img1.jpg"></div>
<div id="photos" class="blue">Photos</div>
<div id="logo" class="green">
<div id="logotype">CONTOSO<br>IMAGES</div>
<div id="pagedesc">Lightbox</div>
</div>
</div>
</div>
</body>
</html>
建立網格元素和指定列與行
現在，要建立網格元素和指定行和列。
第一件事情就是給他加上display屬性，並且設定值為-ms-grid。這樣就建立了一個網格元素。
在網格元素中，我們使用-ms-grid-columns屬性在一個空格隔開的列表中指定每列的寬度，同樣使用-ms-grid-rows屬性在一個空格隔開的列表中指定每行的行高。
例如這個例子中，有一個元素的ID是“grid”，我們的樣式可以這樣寫：
#grid {
height: calc(100vh - 65px); /* 65px to account for scrollbar */;
display: -ms-grid;
-ms-grid-columns: 200px 25px 1fr;
-ms-grid-rows: 160px 25px 1fr 25px 200px;
border: 1px solid red; /* for a visual guide */
}
關於分數單位
要讓網格大小本身根據可用的空間調整，我們可以使用分數單位（fr）。分數單位的大小取決於可用空間和總數量的分數值比例。在我們這個執行個體中，我們只用了一個分數單位，但更複雜的布局也是可能的。例如，考慮這樣的一種情況：四列分別指定寬度為：auto 100px 1fr 2fr，這樣列將會按下面所說的展示：
因為在這個網格中有三個分數單位，第三列是佔了三個分數單位中的一個，所以他就是佔了剩餘空間的三分之一。同樣原理，第四列列寬度佔了剩餘空間的三分之二。
如果你看了現在的頁面，這絕對是沒有做好準備的。頁面上所有不同元素互相重疊，因為我們還沒有定義每外元素應該放在哪一列。我們可以通過：-ms-grid-row、-ms-grid-column、-ms-grid-row-span和-ms-grid-column-span屬性實現。
當應用到頁面元素，指定頁面元素從哪個儲存格開始，我們可以使用-ms-grid-row和-ms-grid-column屬性。如果文本輸入模式是從左至右，從上到下，-ms-grid-row屬性指定元素佔據最上面的行，類似的你指定元素佔據最左邊的列，可以使用-ms-grid-column屬性。
當你頁面的元素要指定跨多少行或多少列時，可以使用-ms-grid-row-span和-ms-grid-column-span屬性。
注意：如果你想在網格中跨多行或多列，另外一些列或行是隱式建立的，其寬度或高度設定為auto (適合內容)，這時要為每一列或行定義一個號碼：
#text_box {
-ms-grid-row: 3;
-ms-grid-column: 1;
-ms-grid-row-span: 3;
padding: 15px;
}
#big_pic {
-ms-grid-row: 1;
-ms-grid-column: 3;
-ms-grid-row-span: 3;
padding: 15px;
}
#photos {
-ms-grid-row: 5;
-ms-grid-column: 3;
padding: 15px;
}
#logo {
-ms-grid-row: 1;
-ms-grid-column: 1;
text-align: center;
padding: 20px;
}
查看這個頁面，這些選取器還添加了一些其他樣式的代碼。
頁面看上去很好了，但我希望圖片能在他的地區置中顯示。為了實現這個效果，我們可以使用-ms-grid-row-align和-ms-grid-column-align來實現。這些屬性定義了如何讓一個項目在行或列中對齊。在這個例子中，將在“#big_pic”同時設定了這兩個屬性的值為“center”，實現水平垂直置中：
#big_pic {
-ms-grid-row: 1;
-ms-grid-column: 3;
-ms-grid-row-span: 3;
padding: 15px;
-ms-grid-row-align: center;
-ms-grid-column-align: center;
}
你可以查看這個頁面的效果。
我們的布局在寬屏下看起來不錯。如果查看的裝置在一個豎屏下又會如何呢？在這種情況之下，我們可以使用媒體查詢。
使用媒體查詢，我們將重新定義布局，以適應不同的螢幕方向。添加具體螢幕方向的樣式，首先要添加媒體查詢的文法：
@media all and (orientation: portrait) {
}
根據媒體查詢的說法，橫屏（orientation: portrait）定義了一個頁面的寬度大於他的高度，相反，豎屏（orientation: landscape）定義了一個頁面的高度大於他的寬度。
現在，我們將為其他頁面元素添加一個新的網格布局和一些新的樣式。將這些樣式放入面前媒體查詢的花括弧內：
#grid {
-ms-grid-columns: 150px 25px 1fr;
-ms-grid-rows: 100px 25px 1fr 25px 100px;
}
#text_box {
-ms-grid-row: 1;
-ms-grid-column: 3;
-ms-grid-row-span: 1;
}
#big_pic {
-ms-grid-row: 3;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
-ms-grid-row-span: 1;
}
#photos {
-ms-grid-row: 5;
-ms-grid-column: 1;
-ms-grid-column-span: 3;
-ms-grid-row-span: 1;
}
#logo {
-ms-grid-row: 1;
-ms-grid-column: 1;
text-align: center;
padding: 20px;
}
#logotype {
font-size: 15px;
}
#pagedesc {
font-size: 12px;
}
#mainphoto {
width: 100%;
border-width: 10px;
border-color: white;
}
現在，你可以查看最後版本的頁面效果。如果你沒有裝置可以測試螢幕的旋轉，你可以用你的IE10開啟，並且縮小瀏覽器視窗的大小，直到寬度小於他的高度。你就可以看到上面的效果。
CSS網格提供了很多可能性的頁面配置。例如網格可以協助你建立內容層疊效果，如半透明的文本在一張圖片之上。更多的資訊可以查看網格的層疊，你可以查看IE開發執行個體中的 CSS Grid overlay sample。
你現在應該對網格布局有了一個認識，以及如何使用網格屬性和媒體查詢，如果想瞭解更多，請看下一節中的連結
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
