點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

如何設置GridLayout（網格布局）列的最小寬度

來源：懂視網責編：小采時間：2020-11-12 00:13:20

如何設置GridLayout（網格布局）列的最小寬度

如何設置GridLayout（網格布局）列的最小寬度:如何設置Grid Layout （網格布局）列的最小寬度？設置網格的列最小寬度時，在網格的列寬設置部分中使用minmax（）函數，下面我們就來看具體的內容。我們先來看一下minmax（）函數的格式minmax（最小寬度，最大寬度）代碼示例在下面的代碼中，網格的第二行的寬

推薦度：

點擊下載本文 文檔為doc格式

導讀如何設置GridLayout（網格布局）列的最小寬度:如何設置Grid Layout （網格布局）列的最小寬度？設置網格的列最小寬度時，在網格的列寬設置部分中使用minmax（）函數，下面我們就來看具體的內容。我們先來看一下minmax（）函數的格式minmax（最小寬度，最大寬度）代碼示例在下面的代碼中，網格的第二行的寬

如何設置Grid Layout （網格布局）列的最小寬度？設置網格的列最小寬度時，在網格的列寬設置部分中使用minmax（）函數，下面我們就來看具體的內容。

網格布局

我們先來看一下minmax（）函數的格式

minmax（最小寬度，最大寬度）

代碼示例

在下面的代碼中，網格的第二行的寬度被指定為最大寬度為1fr，最小寬度為320像素。

.container {
 display: grid; 
 grid-template-columns: 240px minmax(320px, 1fr) 200px; 
 grid-template-rows: 120px auto 120px;
 }

我們來看具體的例子

代碼如下

創(chuàng)建以下CSS，HTML文件。

CSS代碼：

grid-column-minimum-width.css

.Container {
 display: grid; 
 grid-template-columns: 160px minmax(160px, 1fr) 160px 160px; 
 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: 1 / 2; 
 grid-row: 2 / 3; 
 background-color: #7ee68d;
 }
.GridItem6 {
 grid-column: 2 / 3; 
 grid-row: 2 / 3; 
 background-color: #7ee6e2;
 }
.GridItem7 {
 grid-column: 3 / 4; 
 grid-row: 2 / 3; 
 background-color: #95a7f5
 }
.GridItem8 {
 grid-column: 4 / 5; 
 grid-row: 2 / 3; 
 background-color: #d095f5;
 }

HTML代碼：

grid-column-minimum-width.html

<!DOCTYPE html><html><head>
 <meta charset="utf-8" />
 <title></title>
 <link rel="stylesheet" href="grid-column-minimum-width.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>
</body>
</html>

說明：

網格列的寬度由CSS文件中Container類的grid-template-columns來設置的。
由于描述了四個值，因此網格是四列。它左起有以下值。

160px

minmax（160 px，1 fr）

160px

第2列以外都設置了160像素的固定值，是固定的寬度。第二列為minmax（160 px，1 fr），最大列寬為1 fr，最小列寬是160像素。因為指定了1 fr，所以列隊的寬度會擴大到框架的寬度。

根據以下的設置，在窗口寬度上顯示網格的框，1，3，4列是用160像素寬度顯示的，第2列能伸縮的動作。

 grid-template-columns: 160px minmax(160px, 1fr) 160px 160px;

顯示結果

使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。

2345截圖20181129133728.png

縮小窗口寬度。第2列以外是固定寬度，第2列的寬度縮小，如下圖所示。

2345截圖20181129134103.png

寬度縮小到160像素，這是第二行的最小寬度。

2345截圖20181129134440.png

此外，如果縮短窗口寬度，則無法進一步縮小寬度，因此將顯示左右滾動條。

2345截圖20181129135009.png

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

如何設置GridLayout（網格布局）列的最小寬度

推薦度：

點擊下載本文 文檔為doc格式

標簽：設置如何設置如何

熱門焦點

如何設置GridLayout（網格布局）列的最小寬度

如何設置GridLayout（網格布局）列的最小寬度

如何設置GridLayout（網格布局）列的最小寬度

最新推薦

猜你喜歡

熱門推薦