9-容器中行與列之間的間距 · 前端教學筆記[更新中...]

# 9. 容器中的軌道間距 [toc] ## 9.1 屬性 | 序號 | 屬性 | 描述 | | ---- | ------------------- | -------------------------- | | 1 | `column-gap` | 列間距 | | 2 | `row-gap` | 行間距 | | 3 | `gap 行間距列間距` | 簡寫:行列相等,可只寫一個值 | --- ## 9.2 示例 ![](https://img.kancloud.cn/06/24/06249c2bbb5459f3704b1353e6eb6ea5_1210x1228.jpg) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>設置容器中行與列之間的間距/間隙</title> <style> .container { width: 400px; height: 400px; background-color: wheat; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); /* 項目在單元格中拉伸 */ place-items: stretch; /* 設置網格間隙 */ column-gap: 5px; row-gap: 5px; /* 簡寫 */ /* gap: 行間距列間距 */ gap: 5px 5px; /* 行與列相等,可只寫一個值 */ gap: 5px; /* 完美解決 */ } .item { background-color: violet; font-size: 2rem; /* 任務: 行與之間設置5px的間距 */ /* 方法2: margin */ /* margin: 5px; */ /* 存在以下二個問題 1. 與容器邊界相鄰的單元格存在5px間隙,這并不是我需要的 2. 單元格之間的5px間隙被疊加計算, 實際上10px,不滿足需要 */ /* 方法2: 項目設置padding,裁切背景區域 */ /* padding: 5px; */ /* background-clip: content-box; */ /* 存在以下三個問題前二個問題與margin是完全一樣的第三個問題是內容與背景邊沿貼合,用戶體驗,視覺效果非常差,顯然不符合要求針對這個問題, Grid提供了一個終級解決方案, 在容器上設置網格間隙 */ } </style> </head> <body> <div class="container"> <span class="item item1">1</span> <span class="item item2">2</span> <span class="item item3">3</span> <span class="item item4">4</span> <span class="item item5">5</span> <span class="item item6">6</span> <span class="item item7">7</span> <span class="item item8">8</span> <span class="item item9">9</span> </div> </body> </html> ```