一個簡單的CSS網格布局（CSS Grid Layout）

開始說網格布局之前，先說一下什么是網格布局和下面用到的兩個新屬性，fr和repeat函數的定義。

如上圖，網格布局就是指通過水平和垂直創建的一種模式，可以在這個模式上排列元素，網格通常具有行（row）和列（column）以及間隙（列跟列之間的距離，gutter）。

• fr布局單位

fr單位被用於在一系列長度值中分配剩余空間，如果多個已指定了多個部分，則剩下的空間根據各自的數字按比例分配。

• repeat

CSS 函數表示軌道列表中的重復部分，它使得可以更緊湊地寫入列和行重復。

首先是示例的HTML代碼片段

    <div class="wrapper">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">13</div>
        <div class="col span6">14</div>
        <div class="col span3">15</div>
        <div class="col span2">16</div>
    </div>

用網格創建一個布局，一行四列，每列等寬。

 .wrapper {
            /* 轉化元素類型 */ display: grid;
            /* 設置網格的間隙 */ grid-gap: 10px;
            /* 設置每列的尺寸 */ grid-template-columns: repeat(4, 1fr);
        }

這里說一下repeat（4,1fr）的作用，創建4列等寬的網格，每列1fr他們所占的空間量相等。

可以到瀏覽器查看一下效果，為了方便顯示可以添加一個背景顏色

 .col {background: rgb(255, 150, 150);}

修改網格所占行與列

修改列所占比重.span6 { grid-column: 2 / 4;} 修改行所占比重：.span6 { grid-row: 2 / 4;}

• grid-column

1. 第一個單位 length，表示包含塊的網格
2. 第二個單位%，表示快的寬度

• grid-row

1. 第一個單位 length，表示包含塊的網格
2. 第二個單位%，表示快的高度。

瀏覽器效果

 

 

 

參考：網格布局