網(wǎng)格布局中如何以區(qū)域和頁面整體寬度的比率指定網(wǎng)格寬度-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)網(wǎng)格布局中如何以區(qū)域和頁面整體寬度的比率指定網(wǎng)格寬度，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司一直秉承“誠信做人，踏實(shí)做事”的原則，不欺瞞客戶，是我們最起碼的底線！以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個(gè)客戶多一個(gè)朋友！專注中小微企業(yè)官網(wǎng)定制，網(wǎng)站建設(shè)、成都做網(wǎng)站，塑造企業(yè)網(wǎng)絡(luò)形象打造互聯(lián)網(wǎng)企業(yè)效應(yīng)。

在網(wǎng)格布局（Grid Layout）中，你可以將網(wǎng)格的寬度指定為顯示區(qū)域或整個(gè)頁面的寬度的比例，但如果將網(wǎng)格的寬度指定為比例，則需要使用fr為單位，具體內(nèi)容：網(wǎng)格布局中如何以區(qū)域和頁面整體寬度的比率指定網(wǎng)格寬度

我們話不多說，直接來看具體的例子

代碼如下：

編寫以下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">項(xiàng)目1</div>
      <div class="GridItem2">項(xiàng)目2</div>
      <div class="GridItem3">項(xiàng)目3</div>
      <div class="GridItem4">項(xiàng)目4</div>
      <div class="GridItem5">項(xiàng)目5</div>
      <div class="GridItem6">項(xiàng)目6</div>
      <div class="GridItem7">項(xiàng)目7</div>
      <div class="GridItem8">項(xiàng)目8</div>
      <div class="GridItem9">項(xiàng)目9</div>
      <div class="GridItem10">項(xiàng)目10</div>
    </div>
  </body>
</html>

說明：

在此示例中，Container類的CSS描述如下所示。我們將網(wǎng)格列（水平方向）設(shè)置為5列，將行（垂直方向）設(shè)置為2行。
grid-template-columns的值設(shè)置為1fr，并且通過該設(shè)置，網(wǎng)格的寬度按比率顯示。在該示例中，由于存在五個(gè)1fr的設(shè)置，因此1fr的寬度顯示為顯示區(qū)域（整個(gè)頁面）的寬度的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框分配給網(wǎng)格的每個(gè)單元格。

顯示結(jié)果

運(yùn)行上面的HTML頁面。將顯示如下所示的效果。五個(gè)網(wǎng)格的寬度以相等的間隔顯示。

網(wǎng)格布局中如何以區(qū)域和頁面整體寬度的比率指定網(wǎng)格寬度

縮小窗口寬度就減小了每個(gè)網(wǎng)格的單元框架的寬度。

網(wǎng)格布局中如何以區(qū)域和頁面整體寬度的比率指定網(wǎng)格寬度

再縮小窗口，每個(gè)網(wǎng)格的單元框架的寬度仍然繼續(xù)縮小

網(wǎng)格布局中如何以區(qū)域和頁面整體寬度的比率指定網(wǎng)格寬度

最后，我們來更改以下代碼中的一些值看看會(huì)發(fā)生什么情況

確認(rèn)在grid-tempat-COumns屬性中指定了1 fr以外的值時(shí)，將Continer類的設(shè)置更改為以下內(nèi)容。

在下面的描述中，第一列，第三列，第五列為1 fr，第二列為3fr，第四列為2fr。因?yàn)檎w的合計(jì)是8 fr，所以1、3、5列的單元格的寬度是顯示區(qū)域（窗口寬度）的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頁面。將顯示如下所示的效果。

網(wǎng)格布局中如何以區(qū)域和頁面整體寬度的比率指定網(wǎng)格寬度

縮小窗口寬度。隨著窗口的寬度的縮小網(wǎng)格的寬度也會(huì)縮小。寬度減小，同時(shí)保持網(wǎng)格單元寬度比。

網(wǎng)格布局中如何以區(qū)域和頁面整體寬度的比率指定網(wǎng)格寬度

關(guān)于網(wǎng)格布局中如何以區(qū)域和頁面整體寬度的比率指定網(wǎng)格寬度就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)頁題目：網(wǎng)格布局中如何以區(qū)域和頁面整體寬度的比率指定網(wǎng)格寬度-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://aaarwkj.com/article14/iegge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站維護(hù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

網(wǎng)格布局中如何以區(qū)域和頁面整體寬度的比率指定網(wǎng)格寬度-創(chuàng)新互聯(lián)