從實例中學習grid布局
阿新 • • 發佈：2018-05-30
{} 簡單 mic 通過 目前 例子 get www. pre
對於Web開發者來說，網頁布局一直是個比較重要的問題。 Web 布局主要經歷了以下四個階段：
1、table表格布局；
2、float浮動及position定位布局；
3、flex彈性盒模型布局，革命性的突破，解決傳統布局方案上的三大痛點 “排列方向”、“對齊方式”，“自適應尺寸”。是目前最為成熟和強大的布局方案；
4、grid柵格布局，二維布局模塊，具有強大的內容尺寸和定位能力，適合需要在兩個維度上對齊內容的布局。隨著 CSS Grid 的出現，網格變得更加簡單。我們不再需要擔心網格中遇到的復雜計算。
下面我們通過幾個實例來講述它的使用方法：
1.實現4列固定寬度的柵格布局， 只要在 grid-template-columns 聲明中寫四次 100px 即可：
.grid { display: grid; grid-template-columns: 100px 100px 100px 100px; grid-column-gap: 20px; }
2.響應式網格
——方法1：使用fr為單位
.grid-fr { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 20px; min-height: 70px; margin-top: 20px; }
希望 fr 單位每次都創建等寬列，則需要使用 minmax(0, 1fr) 去強制指定它。
.grid-fr_same { grid-template-columns: repeat(4, minmax(0, 1fr)); }
——方法2：媒體查詢
@media (max-width: 960px) { .grid-fr_media { grid-template-columns: repeat(2, 1fr); } }
3.基於高度的網格：通過grid + calc 搭配使用
.grid-fr_height { height: 500px; display: grid; grid-template-rows: repeat(4, 1fr); grid-auto-columns: calc((500px - 3em) / 4); grid-auto-flow: column; grid-gap: 1em; } .grid-fr_height .grid-item:nth-child(3n) { background-color: red; } .grid-fr_height .grid-item:nth-child(3n + 2) { background-color: orange; }
4.網格項的放置：
關鍵字：grid-row（grid-row-star和grid-row-end的縮寫），
grid-column（grid-column-star和grid-column-end的縮寫）
通過 span 關鍵字告訴網格項應該占用多少列。
.grid-fr_select .grid-item { /* 放在第二列，跨越 2 列 */ grid-column: 2 / span 2; background-color: red; }
上面所有例子的代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS-grid</title> <style> .grid { display: grid; grid-template-columns: 100px 100px 100px 100px; grid-column-gap: 20px; min-height: 70px; } .grid-item { background-color: #f2f2f2; padding: 15px; } .grid-fr { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 20px; min-height: 70px; margin-top: 20px; } .grid-fr_same { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-fr_same img { max-width: 100%; } .grid-fr_different { grid-template-columns: 1fr 1.618fr 2.618fr; } @media (max-width: 960px) { .grid-fr_media { grid-template-columns: repeat(2, 1fr); } } .grid-fr_height { height: 500px; display: grid; grid-template-rows: repeat(4, 1fr); grid-auto-columns: calc((500px - 3em) / 4); grid-auto-flow: column; grid-gap: 1em; } .grid-fr_height .grid-item:nth-child(3n) { background-color: red; } .grid-fr_height .grid-item:nth-child(3n + 2) { background-color: orange; } .grid-fr_select .grid-item { /* 放在第二列，跨越 2 列 */ grid-column: 2 / span 2; background-color: red; } </style> </head> <body> <h3>固定寬網格</h3> <div class="grid"> <div class="grid-item">每列的寬度為100px</div> <div class="grid-item">每列的寬度為100px</div> <div class="grid-item">每列的寬度為100px</div> <div class="grid-item">每列的寬度為100px</div> </div> <h3>響應式網格：方法1：使用fr為單位</h3> <div class="grid-fr"> <div class="grid-item">fr 是代表一個片段的靈活長度單位。</div> <div class="grid-item">當你使用 fr 單位時，瀏覽器會分割開放空間並根據 fr 倍數將區域分配給列。</div> <div class="grid-item">使用fr為單位</div> <div class="grid-item">使用fr為單位</div> </div> <h3>使用 fr 單元創建的網格並不總是相等的！</h3> <div class="grid-fr"> <div class="grid-item"> <img src="img/2.jpg"/> </div> <div class="grid-item">每個 fr 單位是可用（或剩余）空間的一個小片段。</div> <div class="grid-item">如果你的元素比使用 fr 單位創建的任何列都要寬，則需要以不同的方式進行計算。</div> <div class="grid-item"></div> </div> <h3>希望 fr 單位每次都創建等寬列，則需要使用 minmax(0, 1fr) 去強制指定它。</h3> <div class="grid-fr grid-fr_same"> <div class="grid-item"> <img src="img/2.jpg"/> </div> <div class="grid-item">通過minmax()函數來創建網格軌道的最小或最大尺寸</div> <div class="grid-item">minmax()函數接受兩個參數：第一個參數定義網格軌道的最小值，第二個參數定義網格軌道的最大值。</div> <div class="grid-item">可以接受任何長度值，也接受auto值。auto值允許網格軌道基於內容的尺寸拉伸或擠壓。</div> </div> <h3>不等寬網格</h3> <div class="grid-fr grid-fr_different"> <div class="grid-item">只需更改 fr 倍數，就可以創建寬度不等的網格。</div> <div class="grid-item">比如：grid-template-columns: 1fr 1.618fr 2.618fr;</div> <div class="grid-item">表示：第二列是第一列的 1.618 倍，第三列是第二列的 1.618 倍。</div> </div> <h3>repeat()</h3> <div class="grid-fr"> <div class="grid-item">repeat()可以創建重復的網格軌道。</div> <div class="grid-item">適用於創建相等尺寸的網格項目和多個網格項目。</div> <div class="grid-item">repeat()接受兩個參數：第一個參數定義網格軌道應該重復的次數，第二個參數定義每個軌道的尺寸。</div> <div class="grid-item">比如這個例子就可以寫成 grid-template-columns: repeat(4,1fr)</div> </div> <h3>響應式網格：方法2：媒體查詢</h3> <div class="grid-fr grid-fr_media"> <div class="grid-item">使用 @media (min-width: ***) {} 進行斷點</div> <div class="grid-item">當你使用 fr 單位時，瀏覽器會分割開放空間並根據 fr 倍數將區域分配給列。</div> <div class="grid-item">使用fr為單位</div> <div class="grid-item">使用fr為單位</div> </div> <h3>基於高度的網格</h3> <div class="grid-fr_height"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> </div> <h3>網格項的放置</h3> <div class="grid-fr grid-fr_select"> <div class="grid-item">可以通過 span 關鍵字告訴網格項應該占用多少列。</div> <div class="grid-item">可以通過 span 關鍵字告訴網格項應該占用多少列。</div> <div class="grid-item">可以通過 span 關鍵字告訴網格項應該占用多少列。</div> </div> </body> </html>
本篇文章是基於 新的 CSS 特性正在改變網頁設計 做的一個簡單筆記。更多詳細內容可閱讀原文。
閱讀此文適用於對grid有個初步了解。想要更深入的，可訪問 grid柵格布局。
從實例中學習grid布局