溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關網格布局中如何以區域和頁面整體寬度的比率指定網格寬度，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
在網格布局（Grid Layout）中，你可以將網格的寬度指定為顯示區域或整個頁面的寬度的比例，但如果將網格的寬度指定為比例，則需要使用fr為單位，具體內容：
我們話不多說，直接來看具體的例子
代碼如下：
編寫以下HTML文件
SimpleGridFr.css
.Container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 120px 120px;
border: solid #ff6a00 1px;
}
.GridItem1 {
grid-column: 1 / 2;
grid-row: 1 / 2;
background-color: #ff9c9c;
}
.GridItem2 {
grid-column: 2 / 3;
grid-row: 1 / 2;
background-color: #ffcb70;
}
.GridItem3 {
grid-column: 3 / 4;
grid-row: 1 / 2;
background-color: #fffd70;
}
.GridItem4 {
grid-column: 4 / 5;
grid-row: 1 / 2;
background-color: #b0ff70;
}
.GridItem5 {
grid-column: 5 / 6;
grid-row: 1 / 2;
background-color: #7ee68d;
}
.GridItem6 {
grid-column: 1 / 2;
grid-row: 2 / 3;
background-color: #7ee6e2;
}
.GridItem7 {
grid-column: 2 / 3;
grid-row: 2 / 3;
background-color: #95a7f5
}
.GridItem8 {
grid-column: 3 / 4;
grid-row: 2 / 3;
background-color: #d095f5;
}
.GridItem9 {
grid-column: 4 / 5;
grid-row: 2 / 3;
background-color: #f5aee4;
}
.GridItem10 {
grid-column: 5 / 6;
grid-row: 2 / 3;
background-color: #edc3a4;
}SimpleGridFr.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" href="SimpleGridFr.css"/>
</head>
<body>
<div class="Container">
<div class="GridItem1">項目1</div>
<div class="GridItem2">項目2</div>
<div class="GridItem3">項目3</div>
<div class="GridItem4">項目4</div>
<div class="GridItem5">項目5</div>
<div class="GridItem6">項目6</div>
<div class="GridItem7">項目7</div>
<div class="GridItem8">項目8</div>
<div class="GridItem9">項目9</div>
<div class="GridItem10">項目10</div>
</div>
</body>
</html>說明：
在此示例中，Container類的CSS描述如下所示。我們將網格列（水平方向）設置為5列，將行（垂直方向）設置為2行。
grid-template-columns的值設置為1fr，并且通過該設置，網格的寬度按比率顯示。在該示例中，由于存在五個1fr的設置，因此1fr的寬度顯示為顯示區域（整個頁面）的寬度的1/5。
.Container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 120px 120px;
border: solid #ff6a00 1px;
}將HTML頁面的“GridItem 1”?“Griditem 10”的div框分配給網格的每個單元格。
顯示結果
運行上面的HTML頁面。將顯示如下所示的效果。五個網格的寬度以相等的間隔顯示。
縮小窗口寬度就減小了每個網格的單元框架的寬度。
再縮小窗口，每個網格的單元框架的寬度仍然繼續縮小
最后，我們來更改以下代碼中的一些值看看會發生什么情況
確認在grid-tempat-COumns屬性中指定了1 fr以外的值時，將Continer類的設置更改為以下內容。
在下面的描述中，第一列，第三列，第五列為1 fr，第二列為3fr，第四列為2fr。因為整體的合計是8 fr，所以1、3、5列的單元格的寬度是顯示區域（窗口寬度）的8分之一的寬度。同樣的第二列是8分之3的寬度，第四列是4分之一（8分之2）的寬度。
.Container {
display: grid;
grid-template-columns: 1fr 3fr 1fr 2fr 1fr;
grid-template-rows: 120px 120px;
border: solid #ff6a00 1px;
}顯示已更改的HTML頁面。將顯示如下所示的效果。
縮小窗口寬度。隨著窗口的寬度的縮小網格的寬度也會縮小。寬度減小，同時保持網格單元寬度比。
關于網格布局中如何以區域和頁面整體寬度的比率指定網格寬度就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
