3-單元格常用單位 · 前端教學筆記[更新中...]

# 3. 單元格尺寸常用單位 [toc] ## 3.1 單位 | 序號 | 單位 | 描述 | | ---- | --------------------- | ---------------------------------- | | 1 | 固定寬度`px` | 固定大小 | | 2 | 百分比`%` | 以容器大小為依據來計算 | | 3 | 自動計算`auto` | 由瀏覽器決定長度 | | 4 | 比例`fr` | 將容器空間按比例分配給每一個單元格 | | 5 | 區間`minmax(min,max)` | 設置單元格尺寸變化范圍 | --- ## 3.2 重復生成單元格 | 序號 | 函數 | 描述 | | ---- | ------------------- | --------------------------------------------------------- | | 1 | 重復生成`repeat()` | 快速生成相同大小單元格的 | | 2 | 自動填充`auto-fill` | 單元格固定,但容器不確定時,可以讓一行/列容納盡可能多的項目 | --- ## 3.3 示例 ![](https://img.kancloud.cn/5a/d8/5ad8425375fe84e43716295651ea0be1_1284x1202.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; /* 1. 固定值 /* 固定三列三行 */ grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; /* 2.百分比 */ grid-template-columns: 20% 30% auto; grid-template-rows: 100px auto 100px; /* 3. 按比例劃分: fr */ grid-template-columns: 1fr 2fr 2fr; /* (400-100)/3=100,1fr=100px, 2fr=200px */ grid-template-rows: 1fr 100px 2fr; /* 4. 重復設置: repeat() */ grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); /* 按(50px 100px)分組重復排列 */ grid-template-columns: repeat(2, 50px 100px); grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); /* 5. 彈性設置: minmax() */ /* 最大寬度僅100px,導致容器寬度出現未分配空間 */ grid-template-columns: repeat(3, minmax(50px, 100px)); /* 最小高度150px,導致超出容器高度 */ grid-template-rows: repeat(3, minmax(150px, 1fr)); /* 6. 自動填充: auto-fill */ /* 自動填充,直到填滿整個容器, 注意如何使用fr和auto,會自動使用最近設置的值 */ width: auto; grid-template-columns: repeat(auto-fill, 100px); grid-template-rows: repeat(auto-fill, 100px); } .item { background-color: lightblue; font-size: 2rem; } </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 item3">4</span> <span class="item item3">5</span> <span class="item item3">6</span> <span class="item item3">7</span> </div> </body> </html> ```