<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                # 4 將項目填充到指定單元格中 [toc] ## 4.1 使用默認網格線劃分單元格 - 默認從左上角開始,從左到右,從上到下,依次從 1 開始編號 - 如果從右下角開始,由下向上,由右向左,依次由從-1 開始編號 - 根據數字網格線,可以將項目放到網格線形成的封閉矩形區域中 - 示例: ![](https://img.kancloud.cn/b7/0e/b70e79d8671651075cb5666fa2ae4e32_1044x986.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(4, 1fr); grid-template-rows: repeat(4, 1fr); } .item { font-size: 2rem; } .item1 { background-color: lightgreen; /* 從左上角開始,占據四個單元格 */ /* 起始行網格線 */ grid-row-start: 1; /* 結束行網格線 */ grid-row-end: 3; /* 起始列網格線 */ grid-column-start: 1; /* 結束行網格線 */ grid-column-end: 3; /* 從右下角開始, 占據四個單元格 */ /* grid-row-start: -1; */ /* 結束行網格線 */ /* grid-row-end: -3; */ /* 起始列網格線 */ /* grid-column-start: -1; */ /* 結束行網格線 */ /* grid-column-end: -3; */ /* 填充到正中間 */ /* grid-row-start: 2; */ /* 結束行網格線 */ /* grid-row-end: 4; */ /* 起始列網格線 */ /* grid-column-start: 2; */ /* 結束行網格線 */ /* grid-column-end: 4; */ /* 填滿容器 */ /* grid-row-start: 1; */ /* 結束行網格線 */ /* grid-row-end: -1; */ /* 起始列網格線 */ /* grid-column-start: 1; */ /* 結束行網格線 */ /* grid-column-end: -1; */ /* 還原到左上角區域 */ } /* 簡寫 */ .item2 { background-color: lightpink; /* 簡寫 grid-row: start / end */ grid-row: 1 / 3; grid-column: 3 / 5; } /* 使用偏移量: 移到左下角 */ .item3 { background-color: yellow; grid-row-start: 3; grid-row-end: span 2; grid-column-start: 1; grid-column-end: span 2; /* 也可以使用簡寫 */ grid-row: 3 / span2; grid-column: 1 / span 2; } .item4 { background-color: lightgrey; /* 從當前位置上開始填充,只需定義結束網絡線即可, 可以進一步簡化 */ grid-row-end: span 2; grid-column-end: span 2; } </style> </head> <body> <!-- .container>.item.item$*3{$} --> <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> </div> </body> </html> ``` --- ## 4.2 使用命名網格線劃分單元格 - 使用語義化的名稱替代容器自動生成的數字網線線編號 - 同一條網絡線可以有多個別名 - 示例: ![](https://img.kancloud.cn/d9/4b/d94b0170559b5de68b3bd8345f0af582_1042x986.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: [c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-end]; grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end]; } .item { font-size: 2rem; } /* 將第一個項目填充到第2行第3列 */ .item1 { background-color: lightgreen; grid-row-start: r2-start; grid-column-start: c3-start; /* 項目默認占據一個單元格,如果偏移量/跨度為1,可省略結束線設置 */ /* grid-row-end: r2-end; */ /* grid-column-end: c3-end; */ } /* 將第二個項目填充占滿第1行 */ .item2 { background-color: lightpink; grid-row: r1-start / r2-start; grid-column: c1-start / c3-end; /* 因為第二個項目默認就在1行1列,所以只需要設置一個列結束的偏移量即可 */ grid-column-end: span 3; } /* 將第三個項目填充到從第2行第1列開始的四個單元格形成的區域中 */ .item3 { background-color: yellow; /* 當前第3個項目本身就是第2行第1列的單元格,直接設置結束偏移量即可 */ grid-column-end: span 2; grid-row-end: span 2; } .item4 { background-color: lightgrey; } </style> </head> <body> <!-- .container>.item.item$*3{$} --> <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> </div> </body> </html> ``` --- ## 4.3 重復設置單元格時, 命名網格線會自動添加索引 | 屬性 | 描述 | | ---------------------------------------- | ------------------------------------------ | | `repeat(3, [col-start] 100px [col-end])` | 只需設置命名前綴,編號會自動生成 | | `grid-column-end: col-end 3;` | 前綴加索引就可以引用到自動生成的命名網格線 | - 示例: ![](https://img.kancloud.cn/56/54/56541b1554a6371e8a6e5bfdc75fa994_1012x964.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; /* col-start..., row-start...: 是命名網格線的前綴,不必指定編號,會自動生成 */ grid-template-columns: repeat(3, [col-start] 100px [col-end]); grid-template-rows: repeat(3, [row-start] 100px [row-end]); } .item { font-size: 2rem; } /* 將第一個項目填滿第一行 */ .item1 { background-color: lightgreen; /* 容器會自動在命名網格線的前綴后, 添加網格線的數字索引 */ grid-column-start: col-start 1; grid-column-end: col-end 3; /* 默認占據一行, 所在行設置可省去 */ /* 其實用我們之前學過的偏移量設置更簡單 */ grid-column-end: span 3; } /* 將第二個項目填充占滿最后一行 */ .item2 { background-color: lightpink; grid-row-start: row-start 3; grid-column-start: col-start 1; grid-column-end: col-end 3; /* 直接使用偏移量簡化 */ grid-column-end: span 3; /* 從當前列開始,可以省去起始列名稱 */ grid-column: span 3; } </style> </head> <body> <div class="container"> <span class="item item1">1</span> <span class="item item2">2</span> </div> </body> </html> ```
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看