[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fgrid":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fgrid":1700,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fgrid":1726},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":14,"pinned":15,"draft":15,"body":16,"seo":1696,"stem":1697,"id":1698,"extension":1699},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fgrid","网格布局","Grid（CSS Grid Layout，网格布局）是 CSS 的二维布局模型：同时在行与列两个方向上划分空间、对齐子项。适合整页骨架、卡片矩阵、仪表盘等需要「行 + 列」一起控制的场景。","技能小册",[12,13],"css","grid","2020-11-09",false,{"type":17,"value":18,"toc":1673},"minimark",[19,22,39,48,58,62,185,189,195,234,241,244,318,358,365,370,397,402,415,467,474,478,537,541,550,571,606,611,628,637,644,648,661,1360,1363,1367,1456,1459,1462,1503,1506,1545,1548,1551,1670],[20,21,8],"h1",{"id":8},[23,24,25,26,30,31,34,35,38],"p",{},"Grid（CSS Grid Layout，网格布局）是 CSS 的",[27,28,29],"strong",{},"二维","布局模型：同时在",[27,32,33],{},"行","与",[27,36,37],{},"列","两个方向上划分空间、对齐子项。适合整页骨架、卡片矩阵、仪表盘等需要「行 + 列」一起控制的场景。",[23,40,41,42,47],{},"若只需沿单一方向排列（导航栏、按钮组、单行均分），应优先使用 ",[43,44,46],"a",{"href":45},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fflex","Flexbox 弹性盒子","。二者常组合：外层 Grid 划区块，区块内 Flex 排组件。",[23,49,50,51,57],{},"交互式属性速查：",[43,52,56],{"href":53,"rel":54},"https:\u002F\u002Fgrid.malven.co\u002F",[55],"nofollow","Grid 可视化指南","。",[59,60,61],"h2",{"id":61},"核心概念",[63,64,65,78],"table",{},[66,67,68],"thead",{},[69,70,71,75],"tr",{},[72,73,74],"th",{},"术语",[72,76,77],{},"说明",[79,80,81,101,115,133,143,153,163],"tbody",{},[69,82,83,89],{},[84,85,86],"td",{},[27,87,88],{},"Grid 容器",[84,90,91,92,96,97,100],{},"设置 ",[93,94,95],"code",{},"display: grid"," 或 ",[93,98,99],{},"display: inline-grid"," 的元素",[69,102,103,108],{},[84,104,105],{},[27,106,107],{},"Grid 项目",[84,109,110,111,114],{},"容器的",[27,112,113],{},"直接子元素","；更深层后代不会自动成为 grid item",[69,116,117,122],{},[84,118,119],{},[27,120,121],{},"网格线（grid line）",[84,123,124,125,128,129,132],{},"划分网格的线，编号从 ",[27,126,127],{},"1"," 开始；可用负数从末端计数（",[93,130,131],{},"-1"," 为最右侧\u002F最下侧线）",[69,134,135,140],{},[84,136,137],{},[27,138,139],{},"轨道（track）",[84,141,142],{},"两条相邻网格线之间的行或列",[69,144,145,150],{},[84,146,147],{},[27,148,149],{},"单元格（cell）",[84,151,152],{},"行与列交叉形成的单格",[69,154,155,160],{},[84,156,157],{},[27,158,159],{},"网格区域（area）",[84,161,162],{},"一个或多个矩形单元格组成的命名区域",[69,164,165,170],{},[84,166,167],{},[27,168,169],{},"显式网格 \u002F 隐式网格",[84,171,172,173,176,177,180,181,184],{},"由 ",[93,174,175],{},"grid-template-*"," 定义的是显式网格；放不下的项目会进入隐式网格，尺寸由 ",[93,178,179],{},"grid-auto-rows"," \u002F ",[93,182,183],{},"grid-auto-columns"," 控制",[59,186,188],{"id":187},"容器属性定义网格结构","容器属性（定义网格结构）",[190,191,193],"h3",{"id":192},"display",[93,194,192],{},[196,197,198,204,210],"ul",{},[199,200,201,203],"li",{},[93,202,13],{},"：块级网格容器。",[199,205,206,209],{},[93,207,208],{},"inline-grid","：行内级网格容器，参与行内排版。",[199,211,212,215,216,219,220,96,223,226,227,229,230,57],{},[93,213,214],{},"subgrid","：在",[27,217,218],{},"子 grid 容器","上，将 ",[93,221,222],{},"grid-template-rows",[93,224,225],{},"grid-template-columns"," 设为 ",[93,228,214],{},"，使子网格轨道与父网格对应轨道对齐（跨层卡片、表单对齐列）。子项须跨越父网格中相应轨道；详见 ",[43,231,233],{"href":232},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fnew-css","现代 CSS · Subgrid",[190,235,237,180,239],{"id":236},"grid-template-columns-grid-template-rows",[93,238,225],{},[93,240,222],{},[23,242,243],{},"定义显式列、行轨道的尺寸。常用取值：",[196,245,246,260,276,290,301],{},[199,247,248,251,252,255,256,259],{},[27,249,250],{},"长度","：",[93,253,254],{},"200px","、",[93,257,258],{},"10rem"," 等固定轨道。",[199,261,262,215,268,271,272,275],{},[27,263,264,267],{},[93,265,266],{},"fr","（fraction）",[27,269,270],{},"扣除固定尺寸轨道后","，按份数分配剩余空间。",[93,273,274],{},"1fr 2fr"," 表示第二列分得的第一列的两倍剩余空间（不是「绝对宽度比 1:2」）。",[199,277,278,283,284,255,287,57],{},[27,279,280],{},[93,281,282],{},"repeat(n, track-list)","：重复轨道，如 ",[93,285,286],{},"repeat(3, 1fr)",[93,288,289],{},"repeat(auto-fill, minmax(200px, 1fr))",[199,291,292,297,298,57],{},[27,293,294],{},[93,295,296],{},"minmax(min, max)","：限制轨道最小\u002F最大尺寸，如 ",[93,299,300],{},"minmax(100px, auto)",[199,302,303,311,312,314,315,317],{},[27,304,305,180,308],{},[93,306,307],{},"auto-fill",[93,309,310],{},"auto-fit","：在响应式网格中自动重复列\u002F行；",[93,313,310],{}," 会折叠空轨道，",[93,316,307],{}," 保留空轨道占位（细节见 MDN）。",[319,320,324],"pre",{"className":321,"code":322,"language":12,"meta":323,"style":323},"language-css shiki shiki-themes material-theme-lighter github-light github-dark","grid-template-columns: 100px 1fr 1fr;\ngrid-template-rows: repeat(4, minmax(50px, auto));\n","",[93,325,326,338],{"__ignoreMap":323},[327,328,331,334],"span",{"class":329,"line":330},"line",1,[327,332,225],{"class":333},"s83vy",[327,335,337],{"class":336},"su5hD",": 100px 1fr 1fr;\n",[327,339,341,343,346,350,353,355],{"class":329,"line":340},2,[327,342,222],{"class":333},[327,344,345],{"class":336},": repeat(4",[327,347,349],{"class":348},"sP7_E",",",[327,351,352],{"class":336}," minmax(50px",[327,354,349],{"class":348},[327,356,357],{"class":336}," auto));\n",[23,359,360,361,364],{},"简写 ",[93,362,363],{},"grid-template"," 可同时写行、列与区域（语法较繁，日常更常分开写 columns \u002F rows \u002F areas）。",[190,366,368],{"id":367},"gap",[93,369,367],{},[196,371,372,388],{},[199,373,374,255,377,380,381,384,385,387],{},[93,375,376],{},"row-gap",[93,378,379],{},"column-gap"," 或简写 ",[93,382,383],{},"gap: \u003Crow> \u003Ccolumn>","：轨道之间的间距（gutter），从可用空间中扣除，不参与 ",[93,386,266],{}," 分配。",[199,389,390,391,394,395,57],{},"旧名 ",[93,392,393],{},"grid-gap"," 等仍被部分浏览器识别，新代码请用 ",[93,396,367],{},[190,398,400],{"id":399},"grid-template-areas",[93,401,399],{},[23,403,404,405,410,411,414],{},"用字符串「画图」命名区域：每一引号字符串是一行，每个名字对应一个单元格；同一名字连续出现表示跨列\u002F跨行。空单元格用 ",[27,406,407],{},[93,408,409],{},"."," 占位。区域必须是",[27,412,413],{},"矩形","，不能出现 L 形缺口。",[319,416,418],{"className":321,"code":417,"language":12,"meta":323,"style":323},"grid-template-areas:\n    \"header header header\"\n    \"sidebar content content\"\n    \"footer footer footer\";\n",[93,419,420,427,441,453],{"__ignoreMap":323},[327,421,422,424],{"class":329,"line":330},[327,423,399],{"class":333},[327,425,426],{"class":336},":\n",[327,428,429,432,435,438],{"class":329,"line":340},[327,430,431],{"class":336},"    \"",[327,433,434],{"class":333},"header",[327,436,437],{"class":333}," header",[327,439,440],{"class":336}," header\"\n",[327,442,444,447,450],{"class":329,"line":443},3,[327,445,446],{"class":336},"    \"sidebar ",[327,448,449],{"class":333},"content",[327,451,452],{"class":336}," content\"\n",[327,454,456,458,461,464],{"class":329,"line":455},4,[327,457,431],{"class":336},[327,459,460],{"class":333},"footer",[327,462,463],{"class":333}," footer",[327,465,466],{"class":336}," footer\";\n",[23,468,469,470,473],{},"子项通过 ",[93,471,472],{},"grid-area: header"," 等方式放入对应命名区域（名称须与模板一致）。",[190,475,477],{"id":476},"对齐与自动放置容器级","对齐与自动放置（容器级）",[196,479,480,497,510,519],{},[199,481,482,180,485,488,489,492,493,496],{},[93,483,484],{},"justify-items",[93,486,487],{},"align-items","：单元格",[27,490,491],{},"内部","内容在行轴 \u002F 列轴的对齐（默认 ",[93,494,495],{},"stretch","）。",[199,498,499,180,502,505,506,509],{},[93,500,501],{},"justify-content",[93,503,504],{},"align-content","：当网格总尺寸",[27,507,508],{},"小于","容器时，整个网格在容器内的对齐与间距分布。",[199,511,512,255,515,518],{},[93,513,514],{},"place-items",[93,516,517],{},"place-content","：上述属性的简写。",[199,520,521,524,525,528,529,532,533,536],{},[93,522,523],{},"grid-auto-flow","：未显式放置的项目如何自动填入网格（",[93,526,527],{},"row"," 默认按行、",[93,530,531],{},"column"," 按列、",[93,534,535],{},"dense"," 尝试填补空洞）。",[59,538,540],{"id":539},"项目属性控制位置与跨度","项目属性（控制位置与跨度）",[190,542,544,180,547],{"id":543},"grid-column-grid-row",[93,545,546],{},"grid-column",[93,548,549],{},"grid-row",[23,551,552,553,180,556,559,560,180,563,566,567,570],{},"分别是 ",[93,554,555],{},"grid-column-start",[93,557,558],{},"grid-column-end"," 与 ",[93,561,562],{},"grid-row-start",[93,564,565],{},"grid-row-end"," 的简写。用",[27,568,569],{},"网格线编号","定位（线号，不是格序号）：",[319,572,574],{"className":321,"code":573,"language":12,"meta":323,"style":323},"\u002F* 从第 1 条列线到第 3 条列线 → 跨越 2 列 *\u002F\ngrid-column: 1 \u002F 3;\n\u002F* 从第 1 条列线起，跨 2 列 *\u002F\ngrid-column: 1 \u002F span 2;\n",[93,575,576,582,589,594],{"__ignoreMap":323},[327,577,578],{"class":329,"line":330},[327,579,581],{"class":580},"sutJx","\u002F* 从第 1 条列线到第 3 条列线 → 跨越 2 列 *\u002F\n",[327,583,584,586],{"class":329,"line":340},[327,585,546],{"class":333},[327,587,588],{"class":336},": 1 \u002F 3;\n",[327,590,591],{"class":329,"line":443},[327,592,593],{"class":580},"\u002F* 从第 1 条列线起，跨 2 列 *\u002F\n",[327,595,596,598,601,603],{"class":329,"line":455},[327,597,546],{"class":333},[327,599,600],{"class":336},": 1 \u002F ",[327,602,327],{"class":333},[327,604,605],{"class":336}," 2;\n",[190,607,609],{"id":608},"grid-area",[93,610,608],{},[196,612,613,622],{},[199,614,615,616,618,619,57],{},"若容器定义了 ",[93,617,399],{},"：可用区域名，如 ",[93,620,621],{},"grid-area: sidebar",[199,623,624,625,57],{},"也可作为四值简写：",[93,626,627],{},"grid-row-start \u002F grid-column-start \u002F grid-row-end \u002F grid-column-end",[190,629,631,180,634],{"id":630},"justify-self-align-self",[93,632,633],{},"justify-self",[93,635,636],{},"align-self",[23,638,639,640,180,642,57],{},"单个项目覆盖容器的 ",[93,641,484],{},[93,643,487],{},[59,645,647],{"id":646},"示例页面骨架header-sidebar-main-footer","示例：页面骨架（Header \u002F Sidebar \u002F Main \u002F Footer）",[23,649,650,651,654,655,657,658,660],{},"下面示例实现常见的四区页面结构（",[27,652,653],{},"并非","传统意义上三栏等高的「圣杯布局」Holy Grail，后者常指左中右三列与页脚的特殊组合）。要点：",[93,656,266],{}," 占满剩余空间，",[93,659,399],{}," 绑定区域名。",[319,662,666],{"className":663,"code":664,"language":665,"meta":323,"style":323},"language-html shiki shiki-themes material-theme-lighter github-light github-dark","\u003C!DOCTYPE html>\n\u003Chtml lang=\"zh\">\n    \u003Chead>\n        \u003Cstyle>\n            * {\n                box-sizing: border-box;\n            }\n            body {\n                margin: 0;\n            }\n            .container {\n                display: grid;\n                height: 100vh;\n                grid-template-rows: 60px 1fr 60px;\n                grid-template-columns: 200px 1fr;\n                grid-template-areas:\n                    \"header header\"\n                    \"sidebar content\"\n                    \"footer footer\";\n            }\n            .item {\n                display: flex;\n                justify-content: center;\n                align-items: center;\n                color: white;\n                font-family: sans-serif;\n            }\n            .header {\n                grid-area: header;\n                background-color: #e74c3c;\n            }\n            .sidebar {\n                grid-area: sidebar;\n                background-color: #3498db;\n            }\n            .content {\n                grid-area: content;\n                background-color: #2ecc71;\n            }\n            .footer {\n                grid-area: footer;\n                background-color: #9b59b6;\n            }\n        \u003C\u002Fstyle>\n    \u003C\u002Fhead>\n    \u003Cbody>\n        \u003Cdiv class=\"container\">\n            \u003Cdiv class=\"item header\">Header\u003C\u002Fdiv>\n            \u003Cdiv class=\"item sidebar\">Sidebar\u003C\u002Fdiv>\n            \u003Cdiv class=\"item content\">Content\u003C\u002Fdiv>\n            \u003Cdiv class=\"item footer\">Footer\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n    \u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html",[93,667,668,684,709,719,729,738,755,761,769,783,788,801,814,831,856,875,883,895,905,917,922,932,944,957,969,982,995,1000,1009,1021,1038,1043,1053,1065,1079,1084,1093,1105,1119,1124,1133,1144,1158,1163,1173,1183,1193,1214,1246,1275,1304,1333,1342,1351],{"__ignoreMap":323},[327,669,670,673,677,681],{"class":329,"line":330},[327,671,672],{"class":348},"\u003C!",[327,674,676],{"class":675},"sQzsp","DOCTYPE",[327,678,680],{"class":679},"s9AJx"," html",[327,682,683],{"class":348},">\n",[327,685,686,689,691,694,697,701,705,707],{"class":329,"line":340},[327,687,688],{"class":348},"\u003C",[327,690,665],{"class":675},[327,692,693],{"class":679}," lang",[327,695,696],{"class":348},"=",[327,698,700],{"class":699},"sjJ54","\"",[327,702,704],{"class":703},"s_sjI","zh",[327,706,700],{"class":699},[327,708,683],{"class":348},[327,710,711,714,717],{"class":329,"line":443},[327,712,713],{"class":348},"    \u003C",[327,715,716],{"class":675},"head",[327,718,683],{"class":348},[327,720,721,724,727],{"class":329,"line":455},[327,722,723],{"class":348},"        \u003C",[327,725,726],{"class":675},"style",[327,728,683],{"class":348},[327,730,732,735],{"class":329,"line":731},5,[327,733,734],{"class":333},"            *",[327,736,737],{"class":348}," {\n",[327,739,741,745,748,752],{"class":329,"line":740},6,[327,742,744],{"class":743},"soE4H","                box-sizing",[327,746,747],{"class":348},":",[327,749,751],{"class":750},"s_hVV"," border-box",[327,753,754],{"class":348},";\n",[327,756,758],{"class":329,"line":757},7,[327,759,760],{"class":348},"            }\n",[327,762,764,767],{"class":329,"line":763},8,[327,765,766],{"class":333},"            body",[327,768,737],{"class":348},[327,770,772,775,777,781],{"class":329,"line":771},9,[327,773,774],{"class":743},"                margin",[327,776,747],{"class":348},[327,778,780],{"class":779},"srdBf"," 0",[327,782,754],{"class":348},[327,784,786],{"class":329,"line":785},10,[327,787,760],{"class":348},[327,789,791,795,799],{"class":329,"line":790},11,[327,792,794],{"class":793},"stp6e","            .",[327,796,798],{"class":797},"sbgvK","container",[327,800,737],{"class":348},[327,802,804,807,809,812],{"class":329,"line":803},12,[327,805,806],{"class":743},"                display",[327,808,747],{"class":348},[327,810,811],{"class":750}," grid",[327,813,754],{"class":348},[327,815,817,820,822,825,829],{"class":329,"line":816},13,[327,818,819],{"class":743},"                height",[327,821,747],{"class":348},[327,823,824],{"class":779}," 100",[327,826,828],{"class":827},"sw1J6","vh",[327,830,754],{"class":348},[327,832,834,837,839,842,845,848,850,852,854],{"class":329,"line":833},14,[327,835,836],{"class":743},"                grid-template-rows",[327,838,747],{"class":348},[327,840,841],{"class":779}," 60",[327,843,844],{"class":827},"px",[327,846,847],{"class":779}," 1",[327,849,266],{"class":827},[327,851,841],{"class":779},[327,853,844],{"class":827},[327,855,754],{"class":348},[327,857,859,862,864,867,869,871,873],{"class":329,"line":858},15,[327,860,861],{"class":743},"                grid-template-columns",[327,863,747],{"class":348},[327,865,866],{"class":779}," 200",[327,868,844],{"class":827},[327,870,847],{"class":779},[327,872,266],{"class":827},[327,874,754],{"class":348},[327,876,878,881],{"class":329,"line":877},16,[327,879,880],{"class":743},"                grid-template-areas",[327,882,426],{"class":348},[327,884,886,889,892],{"class":329,"line":885},17,[327,887,888],{"class":699},"                    \"",[327,890,891],{"class":703},"header header",[327,893,894],{"class":699},"\"\n",[327,896,898,900,903],{"class":329,"line":897},18,[327,899,888],{"class":699},[327,901,902],{"class":703},"sidebar content",[327,904,894],{"class":699},[327,906,908,910,913,915],{"class":329,"line":907},19,[327,909,888],{"class":699},[327,911,912],{"class":703},"footer footer",[327,914,700],{"class":699},[327,916,754],{"class":348},[327,918,920],{"class":329,"line":919},20,[327,921,760],{"class":348},[327,923,925,927,930],{"class":329,"line":924},21,[327,926,794],{"class":793},[327,928,929],{"class":797},"item",[327,931,737],{"class":348},[327,933,935,937,939,942],{"class":329,"line":934},22,[327,936,806],{"class":743},[327,938,747],{"class":348},[327,940,941],{"class":750}," flex",[327,943,754],{"class":348},[327,945,947,950,952,955],{"class":329,"line":946},23,[327,948,949],{"class":743},"                justify-content",[327,951,747],{"class":348},[327,953,954],{"class":750}," center",[327,956,754],{"class":348},[327,958,960,963,965,967],{"class":329,"line":959},24,[327,961,962],{"class":743},"                align-items",[327,964,747],{"class":348},[327,966,954],{"class":750},[327,968,754],{"class":348},[327,970,972,975,977,980],{"class":329,"line":971},25,[327,973,974],{"class":743},"                color",[327,976,747],{"class":348},[327,978,979],{"class":750}," white",[327,981,754],{"class":348},[327,983,985,988,990,993],{"class":329,"line":984},26,[327,986,987],{"class":743},"                font-family",[327,989,747],{"class":348},[327,991,992],{"class":750}," sans-serif",[327,994,754],{"class":348},[327,996,998],{"class":329,"line":997},27,[327,999,760],{"class":348},[327,1001,1003,1005,1007],{"class":329,"line":1002},28,[327,1004,794],{"class":793},[327,1006,434],{"class":797},[327,1008,737],{"class":348},[327,1010,1012,1015,1017,1019],{"class":329,"line":1011},29,[327,1013,1014],{"class":743},"                grid-area",[327,1016,747],{"class":348},[327,1018,437],{"class":336},[327,1020,754],{"class":348},[327,1022,1024,1027,1029,1033,1036],{"class":329,"line":1023},30,[327,1025,1026],{"class":743},"                background-color",[327,1028,747],{"class":348},[327,1030,1032],{"class":1031},"s39Yj"," #",[327,1034,1035],{"class":750},"e74c3c",[327,1037,754],{"class":348},[327,1039,1041],{"class":329,"line":1040},31,[327,1042,760],{"class":348},[327,1044,1046,1048,1051],{"class":329,"line":1045},32,[327,1047,794],{"class":793},[327,1049,1050],{"class":797},"sidebar",[327,1052,737],{"class":348},[327,1054,1056,1058,1060,1063],{"class":329,"line":1055},33,[327,1057,1014],{"class":743},[327,1059,747],{"class":348},[327,1061,1062],{"class":336}," sidebar",[327,1064,754],{"class":348},[327,1066,1068,1070,1072,1074,1077],{"class":329,"line":1067},34,[327,1069,1026],{"class":743},[327,1071,747],{"class":348},[327,1073,1032],{"class":1031},[327,1075,1076],{"class":750},"3498db",[327,1078,754],{"class":348},[327,1080,1082],{"class":329,"line":1081},35,[327,1083,760],{"class":348},[327,1085,1087,1089,1091],{"class":329,"line":1086},36,[327,1088,794],{"class":793},[327,1090,449],{"class":797},[327,1092,737],{"class":348},[327,1094,1096,1098,1100,1103],{"class":329,"line":1095},37,[327,1097,1014],{"class":743},[327,1099,747],{"class":348},[327,1101,1102],{"class":750}," content",[327,1104,754],{"class":348},[327,1106,1108,1110,1112,1114,1117],{"class":329,"line":1107},38,[327,1109,1026],{"class":743},[327,1111,747],{"class":348},[327,1113,1032],{"class":1031},[327,1115,1116],{"class":750},"2ecc71",[327,1118,754],{"class":348},[327,1120,1122],{"class":329,"line":1121},39,[327,1123,760],{"class":348},[327,1125,1127,1129,1131],{"class":329,"line":1126},40,[327,1128,794],{"class":793},[327,1130,460],{"class":797},[327,1132,737],{"class":348},[327,1134,1136,1138,1140,1142],{"class":329,"line":1135},41,[327,1137,1014],{"class":743},[327,1139,747],{"class":348},[327,1141,463],{"class":336},[327,1143,754],{"class":348},[327,1145,1147,1149,1151,1153,1156],{"class":329,"line":1146},42,[327,1148,1026],{"class":743},[327,1150,747],{"class":348},[327,1152,1032],{"class":1031},[327,1154,1155],{"class":750},"9b59b6",[327,1157,754],{"class":348},[327,1159,1161],{"class":329,"line":1160},43,[327,1162,760],{"class":348},[327,1164,1166,1169,1171],{"class":329,"line":1165},44,[327,1167,1168],{"class":348},"        \u003C\u002F",[327,1170,726],{"class":675},[327,1172,683],{"class":348},[327,1174,1176,1179,1181],{"class":329,"line":1175},45,[327,1177,1178],{"class":348},"    \u003C\u002F",[327,1180,716],{"class":675},[327,1182,683],{"class":348},[327,1184,1186,1188,1191],{"class":329,"line":1185},46,[327,1187,713],{"class":348},[327,1189,1190],{"class":675},"body",[327,1192,683],{"class":348},[327,1194,1196,1198,1201,1204,1206,1208,1210,1212],{"class":329,"line":1195},47,[327,1197,723],{"class":348},[327,1199,1200],{"class":675},"div",[327,1202,1203],{"class":679}," class",[327,1205,696],{"class":348},[327,1207,700],{"class":699},[327,1209,798],{"class":703},[327,1211,700],{"class":699},[327,1213,683],{"class":348},[327,1215,1217,1220,1222,1224,1226,1228,1231,1233,1236,1239,1242,1244],{"class":329,"line":1216},48,[327,1218,1219],{"class":348},"            \u003C",[327,1221,1200],{"class":675},[327,1223,1203],{"class":679},[327,1225,696],{"class":348},[327,1227,700],{"class":699},[327,1229,1230],{"class":703},"item header",[327,1232,700],{"class":699},[327,1234,1235],{"class":348},">",[327,1237,1238],{"class":336},"Header",[327,1240,1241],{"class":348},"\u003C\u002F",[327,1243,1200],{"class":675},[327,1245,683],{"class":348},[327,1247,1249,1251,1253,1255,1257,1259,1262,1264,1266,1269,1271,1273],{"class":329,"line":1248},49,[327,1250,1219],{"class":348},[327,1252,1200],{"class":675},[327,1254,1203],{"class":679},[327,1256,696],{"class":348},[327,1258,700],{"class":699},[327,1260,1261],{"class":703},"item sidebar",[327,1263,700],{"class":699},[327,1265,1235],{"class":348},[327,1267,1268],{"class":336},"Sidebar",[327,1270,1241],{"class":348},[327,1272,1200],{"class":675},[327,1274,683],{"class":348},[327,1276,1278,1280,1282,1284,1286,1288,1291,1293,1295,1298,1300,1302],{"class":329,"line":1277},50,[327,1279,1219],{"class":348},[327,1281,1200],{"class":675},[327,1283,1203],{"class":679},[327,1285,696],{"class":348},[327,1287,700],{"class":699},[327,1289,1290],{"class":703},"item content",[327,1292,700],{"class":699},[327,1294,1235],{"class":348},[327,1296,1297],{"class":336},"Content",[327,1299,1241],{"class":348},[327,1301,1200],{"class":675},[327,1303,683],{"class":348},[327,1305,1307,1309,1311,1313,1315,1317,1320,1322,1324,1327,1329,1331],{"class":329,"line":1306},51,[327,1308,1219],{"class":348},[327,1310,1200],{"class":675},[327,1312,1203],{"class":679},[327,1314,696],{"class":348},[327,1316,700],{"class":699},[327,1318,1319],{"class":703},"item footer",[327,1321,700],{"class":699},[327,1323,1235],{"class":348},[327,1325,1326],{"class":336},"Footer",[327,1328,1241],{"class":348},[327,1330,1200],{"class":675},[327,1332,683],{"class":348},[327,1334,1336,1338,1340],{"class":329,"line":1335},52,[327,1337,1168],{"class":348},[327,1339,1200],{"class":675},[327,1341,683],{"class":348},[327,1343,1345,1347,1349],{"class":329,"line":1344},53,[327,1346,1178],{"class":348},[327,1348,1190],{"class":675},[327,1350,683],{"class":348},[327,1352,1354,1356,1358],{"class":329,"line":1353},54,[327,1355,1241],{"class":348},[327,1357,665],{"class":675},[327,1359,683],{"class":348},[23,1361,1362],{},"主内容区内部仍可用 Flex 做工具栏、按钮组等一维排版。",[59,1364,1366],{"id":1365},"flexbox-vs-grid","Flexbox vs Grid",[63,1368,1369,1382],{},[66,1370,1371],{},[69,1372,1373,1376,1379],{},[72,1374,1375],{},"特性",[72,1377,1378],{},"Flexbox",[72,1380,1381],{},"Grid",[79,1383,1384,1395,1406,1427,1445],{},[69,1385,1386,1389,1392],{},[84,1387,1388],{},"维度",[84,1390,1391],{},"一维（主轴 + 交叉轴）",[84,1393,1394],{},"二维（行与列同时定义）",[69,1396,1397,1400,1403],{},[84,1398,1399],{},"典型场景",[84,1401,1402],{},"组件内对齐、均分、换行列表",[84,1404,1405],{},"页面骨架、表单矩阵、响应式卡片墙",[69,1407,1408,1411,1418],{},[84,1409,1410],{},"空间分配",[84,1412,1413,1414,1417],{},"沿主轴伸缩（",[93,1415,1416],{},"flex-grow"," 等）",[84,1419,1420,1421,255,1423,1426],{},"轨道尺寸（",[93,1422,266],{},[93,1424,1425],{},"minmax","、固定长）",[69,1428,1429,1432,1439],{},[84,1430,1431],{},"放置方式",[84,1433,1434,1435,1438],{},"顺序流 + ",[93,1436,1437],{},"order"," 微调",[84,1440,1441,1442,1444],{},"网格线、跨度、",[93,1443,399],{}," 命名",[69,1446,1447,1450,1453],{},[84,1448,1449],{},"关系",[84,1451,1452],{},"常「内容驱动」主轴空间",[84,1454,1455],{},"常「先画网格，再放子项」",[23,1457,1458],{},"二者没有绝对优劣：同一页面中 Grid 管大布局、Flex 管局部，是常见做法。",[59,1460,1461],{"id":1461},"常见注意点",[196,1463,1464,1479,1491],{},[199,1465,1466,1467,1469,1470,1472,1473,1475,1476,496],{},"只给 ",[93,1468,225],{}," 不设行时，行高由内容与 ",[93,1471,179],{}," 决定；需要占满视口高度时要显式写 ",[93,1474,222],{},"（如示例中的 ",[93,1477,1478],{},"1fr",[199,1480,1481,1483,1484,1487,1488,1490],{},[93,1482,266],{}," 只在有",[27,1485,1486],{},"剩余空间","时按比例分配；全是 ",[93,1489,266],{}," 且无固定轨道时，等分容器内容盒（已减去 gap）。",[199,1492,1493,1494,1496,1497,1499,1500,1502],{},"使用 ",[93,1495,399],{}," 时，子项 ",[93,1498,608],{}," 名称必须与模板中的名字一致；留空位置用 ",[93,1501,409],{},"，不能拼出非矩形区域。",[59,1504,1505],{"id":1505},"总结",[196,1507,1508,1515,1533,1539],{},[199,1509,1510,1511,1514],{},"需要",[27,1512,1513],{},"同时","控制行和列 → 用 Grid；只沿一个方向 → 用 Flex。",[199,1516,1517,1518,255,1521,255,1523,180,1525,255,1527,180,1529,255,1531,57],{},"先掌握：",[93,1519,1520],{},"grid-template-columns\u002Frows",[93,1522,367],{},[93,1524,266],{},[93,1526,1425],{},[93,1528,546],{},[93,1530,549],{},[93,1532,399],{},[199,1534,1535,1536,57],{},"响应式卡片优先了解 ",[93,1537,1538],{},"repeat(auto-fill|auto-fit, minmax(...))",[199,1540,1541,1542,1544],{},"与 ",[43,1543,1378],{"href":45}," 组合：Grid 划区，Flex 排区内一行元素。",[59,1546,1547],{"id":1547},"参考文献",[23,1549,1550],{},"以下链接在编写时均可正常访问，供延伸阅读与查阅规范细节：",[63,1552,1553,1562],{},[66,1554,1555],{},[69,1556,1557,1560],{},[72,1558,1559],{},"资料",[72,1561,77],{},[79,1563,1564,1576,1592,1611,1623,1635,1647,1659],{},[69,1565,1566,1573],{},[84,1567,1568],{},[43,1569,1572],{"href":1570,"rel":1571},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002FCSS_grid_layout",[55],"MDN：网格布局",[84,1574,1575],{},"中文概念、示例与属性索引",[69,1577,1578,1585],{},[84,1579,1580],{},[43,1581,1584],{"href":1582,"rel":1583},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Fdisplay",[55],"MDN：display",[84,1586,1587,180,1589,1591],{},[93,1588,13],{},[93,1590,208],{}," 等显示类型",[69,1593,1594,1601],{},[84,1595,1596],{},[43,1597,1600],{"href":1598,"rel":1599},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Fgrid-template-columns",[55],"MDN：grid-template-columns",[84,1602,1603,1604,255,1606,255,1609],{},"列轨道、",[93,1605,266],{},[93,1607,1608],{},"repeat",[93,1610,1425],{},[69,1612,1613,1620],{},[84,1614,1615],{},[43,1616,1619],{"href":1617,"rel":1618},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fzh-CN\u002Fdocs\u002FWeb\u002FCSS\u002Fgrid-template-areas",[55],"MDN：grid-template-areas",[84,1621,1622],{},"命名区域与语法约束",[69,1624,1625,1632],{},[84,1626,1627],{},[43,1628,1631],{"href":1629,"rel":1630},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fcss-grid-2\u002F",[55],"W3C：CSS Grid Layout Module Level 2",[84,1633,1634],{},"官方规范（英文）",[69,1636,1637,1644],{},[84,1638,1639],{},[43,1640,1643],{"href":1641,"rel":1642},"https:\u002F\u002Fcss-tricks.com\u002Fsnippets\u002Fcss\u002Fcomplete-guide-grid\u002F",[55],"A Complete Guide to Grid（CSS-Tricks）",[84,1645,1646],{},"英文图文完整指南",[69,1648,1649,1656],{},[84,1650,1651],{},[43,1652,1655],{"href":1653,"rel":1654},"https:\u002F\u002Fgridbyexample.com\u002F",[55],"Grid by Example",[84,1657,1658],{},"Rachel Andrew 的示例与教程集合",[69,1660,1661,1667],{},[84,1662,1663],{},[43,1664,1666],{"href":53,"rel":1665},[55],"Grid 可视化指南（malven.co）",[84,1668,1669],{},"交互式属性速查",[726,1671,1672],{},"html pre.shiki code .s83vy, html code.shiki .s83vy{--shiki-light:#E2931D;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .sQzsp, html code.shiki .sQzsp{--shiki-light:#E53935;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s9AJx, html code.shiki .s9AJx{--shiki-light:#9C3EDA;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .soE4H, html code.shiki .soE4H{--shiki-light:#8796B0;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .srdBf, html code.shiki .srdBf{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .stp6e, html code.shiki .stp6e{--shiki-light:#39ADB5;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sw1J6, html code.shiki .sw1J6{--shiki-light:#F76D47;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s39Yj, html code.shiki .s39Yj{--shiki-light:#39ADB5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":323,"searchDepth":340,"depth":340,"links":1674},[1675,1676,1684,1691,1692,1693,1694,1695],{"id":61,"depth":340,"text":61},{"id":187,"depth":340,"text":188,"children":1677},[1678,1679,1681,1682,1683],{"id":192,"depth":443,"text":192},{"id":236,"depth":443,"text":1680},"grid-template-columns \u002F grid-template-rows",{"id":367,"depth":443,"text":367},{"id":399,"depth":443,"text":399},{"id":476,"depth":443,"text":477},{"id":539,"depth":340,"text":540,"children":1685},[1686,1688,1689],{"id":543,"depth":443,"text":1687},"grid-column \u002F grid-row",{"id":608,"depth":443,"text":608},{"id":630,"depth":443,"text":1690},"justify-self \u002F align-self",{"id":646,"depth":340,"text":647},{"id":1365,"depth":340,"text":1366},{"id":1461,"depth":340,"text":1461},{"id":1505,"depth":340,"text":1505},{"id":1547,"depth":340,"text":1547},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fweb\u002FCss\u002Fgrid","knowledge\u002Fknowledge\u002Fbooklet\u002Fweb\u002FCss\u002Fgrid.md","md",{"items":1701},[1702,1706,1710,1714,1718,1722],{"path":1703,"title":1704,"description":1705,"category":10,"score":740},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fless-core","Less 基础与核心语法","Less 是 JavaScript 实现的 CSS 预处理器，在 CSS 语法上扩展变量（@）、嵌套、混合、运算与函数，编译为普通 CSS 后由浏览器加载；本文覆盖安装、CLI、构建工具集成与全部核心语法。",{"path":1707,"title":1708,"description":1709,"category":10,"score":740},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-intro","Sass 简介与安装","Sass（Syntactically Awesome Style Sheets）是 CSS 预处理器，在 CSS 语法上增加变量、嵌套、混合、模块、控制指令等；有 SCSS 与缩进语法两种源码语法，官方实现为 Dart Sass。",{"path":1711,"title":1712,"description":1713,"category":10,"score":740},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-modules","模块与控制流：@use、内置函数、@if\u002F@for\u002F@each","Dart Sass 推荐用 @use\u002F@forward 替代已弃用的 @import；内置 sass:* 模块提供颜色、字符串、列表、Map、数学等函数；@if\u002F@for\u002F@each\u002F@while 用于条件与循环生成样式。",{"path":1715,"title":1716,"description":1717,"category":10,"score":740},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-reuse","复用机制：Mixin 与继承","Mixin（@mixin\u002F@include）支持参数与 @content，适合动态样式；@extend 与 %placeholder 通过合并选择器复用完全相同的静态样式，减少 CSS 体积。",{"path":1719,"title":1720,"description":1721,"category":10,"score":740},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fsass\u002Fsass-syntax","语法基础：变量、嵌套与运算","Sass 语法基础：$ 变量与插值、选择器嵌套与 & 父选择器引用、数学\u002F颜色\u002F字符串运算、三种注释语法及与原生 CSS 嵌套的关系。",{"path":1723,"title":1724,"description":1725,"category":10,"score":740},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcolor","颜色与背景","color 设置前景（多为文字）色；background-* 设置元素背景（颜色、图像、渐变）。二者共同决定对比度与视觉层次，直接影响 无障碍 阅读体验。排版中的文本颜色用法见 排版与文本。",{"series":1727,"title":12,"items":1728,"index":757,"prev":1788,"next":1789},"booklet\u002Fweb\u002Fcss",[1729,1733,1735,1739,1743,1746,1750,1754,1755,1759,1761,1765,1768,1772,1776,1780,1781,1782,1783,1784],{"path":1730,"title":1731,"date":1732,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fanimation","变换、过渡与动画","2023-01-09",{"path":1723,"title":1724,"date":1734,"pinned":15},"2025-05-01",{"path":1736,"title":1737,"date":1738,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fcss-sass-less","CSS、Sass 与 Less","2019-09-28",{"path":1740,"title":1741,"date":1742,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fdisplay","display 与常规流","2024-01-30",{"path":45,"title":1744,"date":1745,"pinned":15},"弹性盒子","2020-09-29",{"path":1747,"title":1748,"date":1749,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-optimization","字体优化策略","2021-04-23",{"path":1751,"title":1752,"date":1753,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Ffont-unit","字体单位","2021-10-12",{"path":7,"title":8,"date":14,"pinned":15},{"path":1756,"title":1757,"date":1758,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Flayout-text","排版与文本","2024-01-25",{"path":1703,"title":1704,"date":1760,"pinned":15},"2026-07-23",{"path":1762,"title":1763,"date":1764,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fmodel","盒模型","2023-09-04",{"path":232,"title":1766,"date":1767,"pinned":15},"现代 CSS 特性概览","2021-11-09",{"path":1769,"title":1770,"date":1771,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fposition","定位","2022-11-08",{"path":1773,"title":1774,"date":1775,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fless\u002Fproject","工程化集成与扩展","2024-07-02",{"path":1777,"title":1778,"date":1779,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fresponsive","响应式设计与交互","2022-01-31",{"path":1707,"title":1708,"date":1760,"pinned":15},{"path":1711,"title":1712,"date":1760,"pinned":15},{"path":1715,"title":1716,"date":1760,"pinned":15},{"path":1719,"title":1720,"date":1760,"pinned":15},{"path":1785,"title":1786,"date":1787,"pinned":15},"\u002Fknowledge\u002Fbooklet\u002Fweb\u002Fcss\u002Fvisual-effects","视觉效果","2021-11-04",{"path":1751,"title":1752,"date":1753,"pinned":15},{"path":1756,"title":1757,"date":1758,"pinned":15}]