{"id":260,"date":"2026-03-16T23:19:21","date_gmt":"2026-03-16T15:19:21","guid":{"rendered":"https:\/\/www.resilence.cn\/?p=260"},"modified":"2026-03-16T23:19:21","modified_gmt":"2026-03-16T15:19:21","slug":"day-16-grid%e7%bd%91%e6%a0%bc%e5%b8%83%e5%b1%80","status":"publish","type":"post","link":"https:\/\/www.resilence.cn\/?p=260","title":{"rendered":"Day-16-Grid\u7f51\u683c\u5e03\u5c40"},"content":{"rendered":"<h1>Day 16 &#8211; CSS Grid \u7f51\u683c\u5e03\u5c40<\/h1>\n<h2>\ud83c\udfaf \u5b66\u4e60\u76ee\u6807<\/h2>\n<ul>\n<li>\u7406\u89e3 Grid \u5e03\u5c40\u7684\u6838\u5fc3\u6982\u5ff5\u548c\u4f18\u52bf<\/li>\n<li>\u638c\u63e1 Grid \u5bb9\u5668\u548c\u9879\u76ee\u7684\u5c5e\u6027<\/li>\n<li>\u5b66\u4f1a\u521b\u5efa\u4e8c\u7ef4\u5e03\u5c40\u7cfb\u7edf\uff08\u884c\u548c\u5217\uff09<\/li>\n<li>\u80fd\u591f\u5b9e\u73b0\u590d\u6742\u7684\u7f51\u9875\u5e03\u5c40<\/li>\n<\/ul>\n<hr>\n<h2>\ud83d\udca1 \u6838\u5fc3\u6982\u5ff5<\/h2>\n<h3>1. \u4ec0\u4e48\u662f Grid \u5e03\u5c40\uff1f<\/h3>\n<p><strong>Grid\uff08\u7f51\u683c\uff09\u5e03\u5c40<\/strong>\u662f CSS \u4e2d\u6700\u5f3a\u5927\u7684\u4e8c\u7ef4\u5e03\u5c40\u7cfb\u7edf\uff1a<\/p>\n<pre><code>\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502  Flexbox vs Grid                     \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502  Flexbox\uff1a\u4e00\u7ef4\u5e03\u5c40\uff08\u884c \u6216 \u5217\uff09       \u2502\n\u2502  \u250c\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2510                      \u2502\n\u2502  \u2502 A \u2502 B \u2502 C \u2502  \u2190 \u6cbf\u4e00\u4e2a\u65b9\u5411        \u2502\n\u2502  \u2514\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2518                      \u2502\n\u2502                                      \u2502\n\u2502  Grid\uff1a\u4e8c\u7ef4\u5e03\u5c40\uff08\u884c \u548c \u5217\uff09          \u2502\n\u2502  \u250c\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2510                      \u2502\n\u2502  \u2502 A \u2502 B \u2502 C \u2502  \u2190 \u540c\u65f6\u63a7\u5236\u884c\u548c\u5217    \u2502\n\u2502  \u251c\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2524                      \u2502\n\u2502  \u2502 D \u2502 E \u2502 F \u2502                      \u2502\n\u2502  \u2514\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2518                      \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n<\/code><\/pre>\n<p><strong>Grid \u7684\u4f18\u52bf<\/strong>\uff1a<\/p>\n<ul>\n<li>\u2705 \u540c\u65f6\u63a7\u5236\u884c\u548c\u5217<\/li>\n<li>\u2705 \u5f3a\u5927\u7684\u5bf9\u9f50\u80fd\u529b<\/li>\n<li>\u2705 \u7075\u6d3b\u7684\u7f51\u683c\u8f68\u9053<\/li>\n<li>\u2705 \u76f4\u89c2\u7684\u5e03\u5c40\u4ee3\u7801<\/li>\n<\/ul>\n<h3>2. Grid \u6838\u5fc3\u672f\u8bed<\/h3>\n<pre><code class=\"language-css\">\u5bb9\u5668\uff08Container\uff09\uff1a\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502 \u250c\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2510 \u9879\u76ee\uff08Items\uff09         \u2502\n\u2502 \u2502 A \u2502 B \u2502 C \u2502                      \u2502\n\u2502 \u251c\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2524                      \u2502\n\u2502 \u2502 D \u2502 E \u2502 F \u2502                      \u2502\n\u2502 \u2514\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2518                      \u2502\n\u2502                                      \u2502\n\u2502 \u7f51\u683c\u7ebf\uff08Grid Lines\uff09                \u2502\n\u2502   \u2191   \u2191   \u2191   \u2191                    \u2502\n\u2502   1   2   3   4  (\u5217\u7ebf)            \u2502\n\u2502                                      \u2502\n\u2502 \u7f51\u683c\u8f68\u9053\uff08Grid Tracks\uff09             \u2502\n\u2502   \u2190\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2192                     \u2502\n\u2502   \u5217\u8f68\u9053 \/ \u884c\u8f68\u9053                   \u2502\n\u2502                                      \u2502\n\u2502 \u7f51\u683c\u533a\u57df\uff08Grid Areas\uff09              \u2502\n\u2502   \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510                         \u2502\n\u2502   \u2502  A    \u2502  \u2190 1\u4e2a\u6216\u591a\u4e2a\u5355\u5143\u683c      \u2502\n\u2502   \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518                         \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n<\/code><\/pre>\n<p><strong>\u5173\u952e\u6982\u5ff5<\/strong>\uff1a<\/p>\n<ul>\n<li><strong>\u7f51\u683c\u5bb9\u5668<\/strong>\uff1a\u5e94\u7528 <code>display: grid<\/code> \u7684\u7236\u5143\u7d20<\/li>\n<li><strong>\u7f51\u683c\u9879\u76ee<\/strong>\uff1a\u5bb9\u5668\u7684\u76f4\u63a5\u5b50\u5143\u7d20<\/li>\n<li><strong>\u7f51\u683c\u7ebf<\/strong>\uff1a\u5212\u5206\u7f51\u683c\u7684\u6c34\u5e73\u7ebf\u548c\u5782\u76f4\u7ebf<\/li>\n<li><strong>\u7f51\u683c\u8f68\u9053<\/strong>\uff1a\u4e24\u6761\u76f8\u90bb\u7f51\u683c\u7ebf\u4e4b\u95f4\u7684\u7a7a\u95f4<\/li>\n<li><strong>\u7f51\u683c\u5355\u5143\u683c<\/strong>\uff1a\u6700\u5c0f\u7684\u7f51\u683c\u5355\u4f4d<\/li>\n<li><strong>\u7f51\u683c\u533a\u57df<\/strong>\uff1a\u4efb\u610f\u6570\u91cf\u7684\u7f51\u683c\u5355\u5143\u683c\u7ec4\u6210\u7684\u77e9\u5f62\u533a\u57df<\/li>\n<\/ul>\n<hr>\n<h2>\ud83d\udcdd Grid \u5bb9\u5668\u5c5e\u6027<\/h2>\n<h3>1. \u57fa\u7840\u8bbe\u7f6e<\/h3>\n<pre><code class=\"language-css\">\/* \u521b\u5efa Grid \u5bb9\u5668 *\/\n.container {\n    display: grid;\n}\n\n\/* \u521b\u5efa\u884c\u5185 Grid \u5bb9\u5668 *\/\n.container {\n    display: inline-grid;\n}\n<\/code><\/pre>\n<h3>2. \u5b9a\u4e49\u5217\u548c\u884c<\/h3>\n<p><strong>\u56fa\u5b9a\u5c3a\u5bf8<\/strong>\uff1a<\/p>\n<pre><code class=\"language-css\">.container {\n    display: grid;\n    \/* \u5b9a\u4e49\u4e09\u5217\uff0c\u6bcf\u5217 100px *\/\n    grid-template-columns: 100px 100px 100px;\n    \n    \/* \u5b9a\u4e49\u4e24\u884c\uff0c\u6bcf\u884c 80px *\/\n    grid-template-rows: 80px 80px;\n}\n<\/code><\/pre>\n<p><strong>\u767e\u5206\u6bd4<\/strong>\uff1a<\/p>\n<pre><code class=\"language-css\">.container {\n    grid-template-columns: 33.33% 33.33% 33.33%;\n    grid-template-rows: 50% 50%;\n}\n<\/code><\/pre>\n<p><strong>\u4f7f\u7528 <code>fr<\/code> \u5355\u4f4d<\/strong>\uff08fraction\uff0c\u5206\u6570\u5355\u4f4d\uff09\uff1a<\/p>\n<pre><code class=\"language-css\">.container {\n    \/* \u4e09\u5217\u5747\u5206\u7a7a\u95f4 *\/\n    grid-template-columns: 1fr 1fr 1fr;\n    \n    \/* \u7b2c\u4e00\u5217 1 \u4efd\uff0c\u7b2c\u4e8c\u5217 2 \u4efd *\/\n    grid-template-columns: 1fr 2fr;\n    \n    \/* \u6df7\u5408\u4f7f\u7528 *\/\n    grid-template-columns: 200px 1fr 2fr;\n}\n<\/code><\/pre>\n<p><strong><code>repeat()<\/code> \u51fd\u6570<\/strong>\uff1a<\/p>\n<pre><code class=\"language-css\">.container {\n    \/* \u7b49\u540c\u4e8e 1fr 1fr 1fr 1fr *\/\n    grid-template-columns: repeat(4, 1fr);\n    \n    \/* \u590d\u6742\u6a21\u5f0f\u91cd\u590d *\/\n    grid-template-columns: repeat(2, 100px 1fr);\n    \/* \u7ed3\u679c\uff1a100px 1fr 100px 1fr *\/\n}\n<\/code><\/pre>\n<p><strong><code>auto-fill<\/code> \u548c <code>auto-fit<\/code><\/strong>\uff1a<\/p>\n<pre><code class=\"language-css\">.container {\n    \/* auto-fill\uff1a\u5c3d\u53ef\u80fd\u591a\u5730\u521b\u5efa\u5217 *\/\n    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\n    \/* \u7ed3\u679c\uff1a\u6839\u636e\u5bb9\u5668\u5bbd\u5ea6\u81ea\u52a8\u586b\u5145\u5217 *\/\n    \n    \/* auto-fit\uff1a\u4e0e auto-fill \u7c7b\u4f3c\uff0c\u4f46\u4f1a\u538b\u7f29\u7a7a\u5217 *\/\n    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n}\n<\/code><\/pre>\n<h3>3. \u95f4\u8ddd\uff08Gap\uff09<\/h3>\n<pre><code class=\"language-css\">.container {\n    \/* \u884c\u95f4\u8ddd *\/\n    row-gap: 20px;\n    \n    \/* \u5217\u95f4\u8ddd *\/\n    column-gap: 30px;\n    \n    \/* \u7b80\u5199\uff1a\u884c\u95f4\u8ddd \u5217\u95f4\u8ddd *\/\n    gap: 20px 30px;\n    \n    \/* \u884c\u5217\u76f8\u540c *\/\n    gap: 20px;\n}\n<\/code><\/pre>\n<h3>4. \u547d\u540d\u7f51\u683c\u7ebf<\/h3>\n<pre><code class=\"language-css\">.container {\n    grid-template-columns:\n        [start] 1fr\n        [middle] 2fr\n        [end];\n    \n    grid-template-rows:\n        [header-start] 60px\n        [header-end main-start] 1fr\n        [main-end footer-start] 40px\n        [footer-end];\n}\n\n\/* \u4f7f\u7528\u547d\u540d\u7ebf *\/\n.item {\n    grid-column: start \/ middle;\n    grid-row: header-start \/ header-end;\n}\n<\/code><\/pre>\n<h3>5. \u547d\u540d\u7f51\u683c\u533a\u57df<\/h3>\n<pre><code class=\"language-css\">.container {\n    display: grid;\n    grid-template-columns: 200px 1fr 200px;\n    grid-template-rows: 60px 1fr 40px;\n    \n    \/* \u5e03\u5c40\u6a21\u677f *\/\n    grid-template-areas:\n        &quot;header header header&quot;\n        &quot;sidebar main ads&quot;\n        &quot;footer footer footer&quot;;\n}\n\n.header { grid-area: header; }\n.sidebar { grid-area: sidebar; }\n.main { grid-area: main; }\n.ads { grid-area: ads; }\n.footer { grid-area: footer; }\n<\/code><\/pre>\n<p><strong>\u53ef\u89c6\u5316<\/strong>\uff1a<\/p>\n<pre><code>\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502            header                  \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502 side \u2502    main       \u2502    ads     \u2502\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\n\u2502            footer                  \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n<\/code><\/pre>\n<hr>\n<h2>\ud83d\udcdd Grid \u9879\u76ee\u5c5e\u6027<\/h2>\n<h3>1. \u6307\u5b9a\u9879\u76ee\u4f4d\u7f6e<\/h3>\n<p><strong>\u4f7f\u7528\u7f51\u683c\u7ebf\u7f16\u53f7<\/strong>\uff1a<\/p>\n<pre><code class=\"language-css\">.item {\n    \/* \u5217\uff1a\u4ece\u7b2c 1 \u6761\u7ebf\u5230\u7b2c 3 \u6761\u7ebf *\/\n    grid-column: 1 \/ 3;\n    \n    \/* \u884c\uff1a\u4ece\u7b2c 2 \u6761\u7ebf\u5230\u7b2c 4 \u6761\u7ebf *\/\n    grid-row: 2 \/ 4;\n}\n<\/code><\/pre>\n<p><strong>\u4f7f\u7528 <code>span<\/code> \u8de8\u8d8a<\/strong>\uff1a<\/p>\n<pre><code class=\"language-css\">.item {\n    \/* \u8de8\u8d8a 2 \u5217 *\/\n    grid-column: span 2;\n    \n    \/* \u4ece\u7b2c 2 \u5217\u5f00\u59cb\uff0c\u8de8\u8d8a 3 \u5217 *\/\n    grid-column: 2 \/ span 3;\n    \n    \/* \u4ece\u7b2c 2 \u884c\u5f00\u59cb\uff0c\u8de8\u8d8a\u5230\u7b2c 4 \u884c *\/\n    grid-row: 2 \/ 4;\n}\n<\/code><\/pre>\n<p><strong>\u7b80\u5199<\/strong>\uff1a<\/p>\n<pre><code class=\"language-css\">.item {\n    \/* grid-column-start \/ grid-column-end *\/\n    grid-column: 1 \/ 3;\n    \n    \/* grid-row-start \/ grid-row-end *\/\n    grid-row: 1 \/ 3;\n    \n    \/* \u5b8c\u5168\u7b80\u5199\uff1arow-start \/ column-start \/ row-end \/ column-end *\/\n    grid-area: 1 \/ 1 \/ 3 \/ 3;\n}\n<\/code><\/pre>\n<p><strong>\u4f7f\u7528\u547d\u540d<\/strong>\uff1a<\/p>\n<pre><code class=\"language-css\">.item {\n    grid-area: header;  \/* \u4f7f\u7528 grid-template-areas \u5b9a\u4e49\u7684\u540d\u79f0 *\/\n}\n<\/code><\/pre>\n<h3>2. \u5bf9\u9f50\u65b9\u5f0f<\/h3>\n<p><strong>\u5355\u4e2a\u9879\u76ee<\/strong>\uff1a<\/p>\n<pre><code class=\"language-css\">.item {\n    \/* \u6c34\u5e73\u5bf9\u9f50\uff08\u5217\u65b9\u5411\uff09 *\/\n    justify-self: start | end | center | stretch;\n    \n    \/* \u5782\u76f4\u5bf9\u9f50\uff08\u884c\u65b9\u5411\uff09 *\/\n    align-self: start | end | center | stretch;\n    \n    \/* \u7b80\u5199 *\/\n    place-self: align-self justify-self;\n    place-self: center center;  \/* \u5782\u76f4\u5c45\u4e2d \u6c34\u5e73\u5c45\u4e2d *\/\n}\n<\/code><\/pre>\n<p><strong>\u6240\u6709\u9879\u76ee<\/strong>\uff08\u5bb9\u5668\u5c5e\u6027\uff09\uff1a<\/p>\n<pre><code class=\"language-css\">.container {\n    \/* \u6240\u6709\u9879\u76ee\u6c34\u5e73\u5bf9\u9f50 *\/\n    justify-items: start | end | center | stretch;\n    \n    \/* \u6240\u6709\u9879\u76ee\u5782\u76f4\u5bf9\u9f50 *\/\n    align-items: start | end | center | stretch;\n    \n    \/* \u7b80\u5199 *\/\n    place-items: align-items justify-items;\n}\n<\/code><\/pre>\n<h3>3. \u6574\u4e2a\u7f51\u683c\u5bf9\u9f50<\/h3>\n<pre><code class=\"language-css\">.container {\n    \/* \u7f51\u683c\u5728\u5bb9\u5668\u5185\u7684\u6c34\u5e73\u5bf9\u9f50 *\/\n    justify-content: start | end | center | stretch | space-around | space-between | space-evenly;\n    \n    \/* \u7f51\u683c\u5728\u5bb9\u5668\u5185\u7684\u5782\u76f4\u5bf9\u9f50 *\/\n    align-content: start | end | center | stretch | space-around | space-between | space-evenly;\n    \n    \/* \u7b80\u5199 *\/\n    place-content: align-content justify-content;\n}\n<\/code><\/pre>\n<p><strong>\u5bf9\u6bd4\u56fe<\/strong>\uff1a<\/p>\n<pre><code>start:        center:        space-between:\n\u250c\u2500\u2500\u2500\u2500\u2510        \u250c\u2500\u2500\u2500\u2500\u2510         \u250c\u2500\u2500\u2500\u2500\u2510\n\u2502 AB \u2502        \u2502 AB \u2502         \u2502 A  \u2502\n\u2502 CD \u2502        \u2502 CD \u2502         \u2502  B \u2502\n\u2514\u2500\u2500\u2500\u2500\u2518        \u2514\u2500\u2500\u2500\u2500\u2518         \u2502 CD \u2502\n                             \u2502  E \u2502\n                              \u2514\u2500\u2500\u2500\u2500\u2518\n<\/code><\/pre>\n<hr>\n<h2>\ud83c\udfae \u5b9e\u6218\u793a\u4f8b<\/h2>\n<h3>\u793a\u4f8b 1\uff1a\u57fa\u7840\u7f51\u683c\u5e03\u5c40<\/h3>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;zh-CN&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;Grid \u57fa\u7840\u5e03\u5c40&lt;\/title&gt;\n    &lt;style&gt;\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: 'Segoe UI', sans-serif;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            min-height: 100vh;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            padding: 20px;\n        }\n\n        .container {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            grid-template-rows: repeat(2, 150px);\n            gap: 20px;\n            max-width: 900px;\n            width: 100%;\n        }\n\n        .item {\n            background: white;\n            border-radius: 12px;\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            font-size: 2rem;\n            font-weight: bold;\n            color: white;\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n            transition: transform 0.3s, box-shadow 0.3s;\n            cursor: pointer;\n        }\n\n        .item:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);\n        }\n\n        .item:nth-child(1) { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }\n        .item:nth-child(2) { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }\n        .item:nth-child(3) { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }\n        .item:nth-child(4) { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }\n        .item:nth-child(5) { background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); }\n        .item:nth-child(6) { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); color: #333; }\n\n        .info {\n            position: fixed;\n            bottom: 20px;\n            right: 20px;\n            background: white;\n            padding: 15px 25px;\n            border-radius: 8px;\n            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);\n            font-size: 0.9rem;\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=&quot;container&quot;&gt;\n        &lt;div class=&quot;item&quot;&gt;1&lt;\/div&gt;\n        &lt;div class=&quot;item&quot;&gt;2&lt;\/div&gt;\n        &lt;div class=&quot;item&quot;&gt;3&lt;\/div&gt;\n        &lt;div class=&quot;item&quot;&gt;4&lt;\/div&gt;\n        &lt;div class=&quot;item&quot;&gt;5&lt;\/div&gt;\n        &lt;div class=&quot;item&quot;&gt;6&lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;info&quot;&gt;\n        \ud83d\udcd0 3\u5217 \u00d7 2\u884c | gap: 20px\n    &lt;\/div&gt;\n\n    &lt;script&gt;\n        \/\/ \u70b9\u51fb\u9879\u76ee\u663e\u793a\u4f4d\u7f6e\u4fe1\u606f\n        const items = document.querySelectorAll('.item');\n        const info = document.querySelector('.info');\n\n        items.forEach(item =&gt; {\n            item.addEventListener('click', function() {\n                const computedStyle = window.getComputedStyle(this);\n                const columnStart = computedStyle.gridColumnStart;\n                const columnEnd = computedStyle.gridColumnEnd;\n                const rowStart = computedStyle.gridRowStart;\n                const rowEnd = computedStyle.gridRowEnd;\n\n                info.innerHTML = `\n                    \ud83d\udccd \u4f4d\u7f6e\u4fe1\u606f&lt;br&gt;\n                    \u5217: ${columnStart} \u2192 ${columnEnd}&lt;br&gt;\n                    \u884c: ${rowStart} \u2192 ${rowEnd}\n                `;\n            });\n        });\n    &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<h3>\u793a\u4f8b 2\uff1a\u54cd\u5e94\u5f0f\u5361\u7247\u7f51\u683c<\/h3>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;zh-CN&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;\u54cd\u5e94\u5f0f\u5361\u7247\u7f51\u683c&lt;\/title&gt;\n    &lt;style&gt;\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: 'Segoe UI', sans-serif;\n            background: #f5f7fa;\n            padding: 40px 20px;\n        }\n\n        .header {\n            text-align: center;\n            margin-bottom: 40px;\n        }\n\n        .header h1 {\n            color: #2c3e50;\n            font-size: 2.5rem;\n            margin-bottom: 10px;\n        }\n\n        .header p {\n            color: #7f8c8d;\n            font-size: 1.1rem;\n        }\n\n        .grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n            gap: 25px;\n            max-width: 1200px;\n            margin: 0 auto;\n        }\n\n        .card {\n            background: white;\n            border-radius: 12px;\n            overflow: hidden;\n            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);\n            transition: transform 0.3s, box-shadow 0.3s;\n        }\n\n        .card:hover {\n            transform: translateY(-8px);\n            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);\n        }\n\n        .card-image {\n            height: 180px;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            font-size: 4rem;\n        }\n\n        .card:nth-child(2) .card-image {\n            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n        }\n\n        .card:nth-child(3) .card-image {\n            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);\n        }\n\n        .card:nth-child(4) .card-image {\n            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);\n        }\n\n        .card-content {\n            padding: 20px;\n        }\n\n        .card-title {\n            font-size: 1.3rem;\n            color: #2c3e50;\n            margin-bottom: 10px;\n        }\n\n        .card-description {\n            color: #7f8c8d;\n            line-height: 1.6;\n            margin-bottom: 15px;\n        }\n\n        .card-footer {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n        }\n\n        .card-tag {\n            background: #ecf0f1;\n            padding: 5px 12px;\n            border-radius: 20px;\n            font-size: 0.85rem;\n            color: #7f8c8d;\n        }\n\n        .card-button {\n            background: #3498db;\n            color: white;\n            border: none;\n            padding: 8px 16px;\n            border-radius: 6px;\n            cursor: pointer;\n            font-size: 0.9rem;\n            transition: background 0.3s;\n        }\n\n        .card-button:hover {\n            background: #2980b9;\n        }\n\n        @media (max-width: 768px) {\n            .header h1 {\n                font-size: 2rem;\n            }\n\n            .grid {\n                grid-template-columns: 1fr;\n            }\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;div class=&quot;header&quot;&gt;\n        &lt;h1&gt;\u54cd\u5e94\u5f0f\u5361\u7247\u7f51\u683c&lt;\/h1&gt;\n        &lt;p&gt;\u81ea\u52a8\u9002\u5e94\u5c4f\u5e55\u5c3a\u5bf8\u7684 Grid \u5e03\u5c40&lt;\/p&gt;\n    &lt;\/div&gt;\n\n    &lt;div class=&quot;grid&quot;&gt;\n        &lt;div class=&quot;card&quot;&gt;\n            &lt;div class=&quot;card-image&quot;&gt;\ud83d\ude80&lt;\/div&gt;\n            &lt;div class=&quot;card-content&quot;&gt;\n                &lt;h3 class=&quot;card-title&quot;&gt;Grid \u5e03\u5c40&lt;\/h3&gt;\n                &lt;p class=&quot;card-description&quot;&gt;\n                    \u5f3a\u5927\u7684\u4e8c\u7ef4\u5e03\u5c40\u7cfb\u7edf\uff0c\u8f7b\u677e\u5b9e\u73b0\u590d\u6742\u7684\u7f51\u9875\u5e03\u5c40\u3002\n                &lt;\/p&gt;\n                &lt;div class=&quot;card-footer&quot;&gt;\n                    &lt;span class=&quot;card-tag&quot;&gt;CSS&lt;\/span&gt;\n                    &lt;button class=&quot;card-button&quot;&gt;\u4e86\u89e3\u66f4\u591a&lt;\/button&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n\n        &lt;div class=&quot;card&quot;&gt;\n            &lt;div class=&quot;card-image&quot;&gt;\ud83c\udfa8&lt;\/div&gt;\n            &lt;div class=&quot;card-content&quot;&gt;\n                &lt;h3 class=&quot;card-title&quot;&gt;\u54cd\u5e94\u5f0f\u8bbe\u8ba1&lt;\/h3&gt;\n                &lt;p class=&quot;card-description&quot;&gt;\n                    \u4f7f\u7528 auto-fit \u548c minmax \u521b\u5efa\u81ea\u9002\u5e94\u7f51\u683c\u5e03\u5c40\u3002\n                &lt;\/p&gt;\n                &lt;div class=&quot;card-footer&quot;&gt;\n                    &lt;span class=&quot;card-tag&quot;&gt;\u8bbe\u8ba1&lt;\/span&gt;\n                    &lt;button class=&quot;card-button&quot;&gt;\u4e86\u89e3\u66f4\u591a&lt;\/button&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n\n        &lt;div class=&quot;card&quot;&gt;\n            &lt;div class=&quot;card-image&quot;&gt;\u26a1&lt;\/div&gt;\n            &lt;div class=&quot;card-content&quot;&gt;\n                &lt;h3 class=&quot;card-title&quot;&gt;\u6027\u80fd\u4f18\u5316&lt;\/h3&gt;\n                &lt;p class=&quot;card-description&quot;&gt;\n                    Grid \u5e03\u5c40\u6027\u80fd\u4f18\u79c0\uff0c\u6e32\u67d3\u6548\u7387\u9ad8\uff0c\u9002\u5408\u590d\u6742\u5e03\u5c40\u3002\n                &lt;\/p&gt;\n                &lt;div class=&quot;card-footer&quot;&gt;\n                    &lt;span class=&quot;card-tag&quot;&gt;\u4f18\u5316&lt;\/span&gt;\n                    &lt;button class=&quot;card-button&quot;&gt;\u4e86\u89e3\u66f4\u591a&lt;\/button&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n\n        &lt;div class=&quot;card&quot;&gt;\n            &lt;div class=&quot;card-image&quot;&gt;\ud83d\udcf1&lt;\/div&gt;\n            &lt;div class=&quot;card-content&quot;&gt;\n                &lt;h3 class=&quot;card-title&quot;&gt;\u79fb\u52a8\u4f18\u5148&lt;\/h3&gt;\n                &lt;p class=&quot;card-description&quot;&gt;\n                    \u5b8c\u7f8e\u652f\u6301\u79fb\u52a8\u8bbe\u5907\uff0c\u63d0\u4f9b\u6d41\u7545\u7684\u7528\u6237\u4f53\u9a8c\u3002\n                &lt;\/p&gt;\n                &lt;div class=&quot;card-footer&quot;&gt;\n                    &lt;span class=&quot;card-tag&quot;&gt;\u79fb\u52a8\u7aef&lt;\/span&gt;\n                    &lt;button class=&quot;card-button&quot;&gt;\u4e86\u89e3\u66f4\u591a&lt;\/button&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;script&gt;\n        \/\/ \u6309\u94ae\u70b9\u51fb\u4e8b\u4ef6\n        document.querySelectorAll('.card-button').forEach(button =&gt; {\n            button.addEventListener('click', function() {\n                const card = this.closest('.card');\n                const title = card.querySelector('.card-title').textContent;\n                alert(`\u4f60\u70b9\u51fb\u4e86\uff1a${title}`);\n            });\n        });\n    &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<h3>\u793a\u4f8b 3\uff1a\u5723\u676f\u5e03\u5c40\uff08Holy Grail Layout\uff09<\/h3>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;zh-CN&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;title&gt;\u5723\u676f\u5e03\u5c40 - Grid&lt;\/title&gt;\n    &lt;style&gt;\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n\n        body {\n            font-family: 'Segoe UI', sans-serif;\n            min-height: 100vh;\n            display: grid;\n            grid-template-areas:\n                &quot;header header header&quot;\n                &quot;nav    main   ads&quot;\n                &quot;footer footer footer&quot;;\n            grid-template-rows: auto 1fr auto;\n            grid-template-columns: 200px 1fr 200px;\n            gap: 0;\n        }\n\n        .header {\n            grid-area: header;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            color: white;\n            padding: 20px;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n        }\n\n        .header h1 {\n            font-size: 1.8rem;\n        }\n\n        .header nav ul {\n            display: flex;\n            list-style: none;\n            gap: 20px;\n        }\n\n        .header nav a {\n            color: white;\n            text-decoration: none;\n            transition: opacity 0.3s;\n        }\n\n        .header nav a:hover {\n            opacity: 0.8;\n        }\n\n        .nav {\n            grid-area: nav;\n            background: #2c3e50;\n            color: white;\n            padding: 20px;\n        }\n\n        .nav h3 {\n            margin-bottom: 15px;\n            color: #ecf0f1;\n        }\n\n        .nav ul {\n            list-style: none;\n        }\n\n        .nav li {\n            padding: 10px 0;\n            border-bottom: 1px solid #34495e;\n        }\n\n        .nav a {\n            color: #bdc3c7;\n            text-decoration: none;\n            transition: color 0.3s;\n        }\n\n        .nav a:hover {\n            color: white;\n        }\n\n        .main {\n            grid-area: main;\n            padding: 30px;\n            background: #ecf0f1;\n        }\n\n        .main h2 {\n            color: #2c3e50;\n            margin-bottom: 15px;\n            font-size: 1.8rem;\n        }\n\n        .main p {\n            color: #7f8c8d;\n            line-height: 1.8;\n            margin-bottom: 15px;\n        }\n\n        .ads {\n            grid-area: ads;\n            background: #34495e;\n            color: white;\n            padding: 20px;\n        }\n\n        .ads h3 {\n            margin-bottom: 15px;\n        }\n\n        .ad-item {\n            background: #2c3e50;\n            padding: 15px;\n            margin-bottom: 15px;\n            border-radius: 8px;\n        }\n\n        .footer {\n            grid-area: footer;\n            background: #1a252f;\n            color: #bdc3c7;\n            padding: 20px;\n            text-align: center;\n        }\n\n        \/* \u54cd\u5e94\u5f0f\u8bbe\u8ba1 *\/\n        @media (max-width: 900px) {\n            body {\n                grid-template-areas:\n                    &quot;header header&quot;\n                    &quot;nav    main&quot;\n                    &quot;ads    ads&quot;\n                    &quot;footer footer&quot;;\n                grid-template-columns: 150px 1fr;\n            }\n        }\n\n        @media (max-width: 600px) {\n            body {\n                grid-template-areas:\n                    &quot;header&quot;\n                    &quot;nav&quot;\n                    &quot;main&quot;\n                    &quot;ads&quot;\n                    &quot;footer&quot;;\n                grid-template-columns: 1fr;\n            }\n\n            .header {\n                flex-direction: column;\n                gap: 15px;\n            }\n\n            .header nav ul {\n                flex-direction: column;\n                text-align: center;\n            }\n        }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;header class=&quot;header&quot;&gt;\n        &lt;h1&gt;\ud83c\udfa8 Grid \u5723\u676f\u5e03\u5c40&lt;\/h1&gt;\n        &lt;nav&gt;\n            &lt;ul&gt;\n                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;\u9996\u9875&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;\u5173\u4e8e&lt;\/a&gt;&lt;\/li&gt;\n                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;\u8054\u7cfb&lt;\/a&gt;&lt;\/li&gt;\n            &lt;\/ul&gt;\n        &lt;\/nav&gt;\n    &lt;\/header&gt;\n\n    &lt;aside class=&quot;nav&quot;&gt;\n        &lt;h3&gt;\ud83d\udcda \u5bfc\u822a&lt;\/h3&gt;\n        &lt;ul&gt;\n            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;HTML \u57fa\u7840&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;CSS \u6837\u5f0f&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;JavaScript&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;\u54cd\u5e94\u5f0f\u8bbe\u8ba1&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;\u6027\u80fd\u4f18\u5316&lt;\/a&gt;&lt;\/li&gt;\n        &lt;\/ul&gt;\n    &lt;\/aside&gt;\n\n    &lt;main class=&quot;main&quot;&gt;\n        &lt;h2&gt;\u4ec0\u4e48\u662f\u5723\u676f\u5e03\u5c40\uff1f&lt;\/h2&gt;\n        &lt;p&gt;\n            \u5723\u676f\u5e03\u5c40\u662f\u7f51\u9875\u8bbe\u8ba1\u4e2d\u7ecf\u5178\u7684\u5e03\u5c40\u6a21\u5f0f\uff0c\u5305\u542b\u9875\u7709\u3001\u9875\u811a\u3001\n            \u4e3b\u5185\u5bb9\u533a\u3001\u4fa7\u8fb9\u680f\u548c\u5e7f\u544a\u533a\u3002\u4f7f\u7528 Grid \u53ef\u4ee5\u8f7b\u677e\u5b9e\u73b0\u8fd9\u79cd\u5e03\u5c40\u3002\n        &lt;\/p&gt;\n        &lt;h2&gt;Grid \u7684\u4f18\u52bf&lt;\/h2&gt;\n        &lt;p&gt;\n            \u4e0e\u4f20\u7edf\u7684\u6d6e\u52a8\u548c\u5b9a\u4f4d\u76f8\u6bd4\uff0cGrid \u63d0\u4f9b\u4e86\u66f4\u76f4\u89c2\u3001\u66f4\u5f3a\u5927\u7684\u5e03\u5c40\u65b9\u5f0f\u3002\n            \u4f60\u53ef\u4ee5\u7cbe\u786e\u63a7\u5236\u6bcf\u4e2a\u533a\u57df\u7684\u4f4d\u7f6e\u548c\u5927\u5c0f\uff0c\u800c\u65e0\u9700\u590d\u6742\u7684\u8ba1\u7b97\u3002\n        &lt;\/p&gt;\n        &lt;h2&gt;\u54cd\u5e94\u5f0f\u8bbe\u8ba1&lt;\/h3&gt;\n        &lt;p&gt;\n            \u901a\u8fc7\u5a92\u4f53\u67e5\u8be2\u548c Grid \u7684\u7075\u6d3b\u6027\uff0c\u6211\u4eec\u53ef\u4ee5\u8f7b\u677e\u521b\u5efa\u9002\u5e94\u4e0d\u540c\u5c4f\u5e55\u5c3a\u5bf8\u7684\u5e03\u5c40\u3002\n            \u8bd5\u8bd5\u8c03\u6574\u6d4f\u89c8\u5668\u7a97\u53e3\u5927\u5c0f\uff0c\u770b\u770b\u5e03\u5c40\u5982\u4f55\u53d8\u5316\uff01\n        &lt;\/p&gt;\n    &lt;\/main&gt;\n\n    &lt;aside class=&quot;ads&quot;&gt;\n        &lt;h3&gt;\ud83d\udce2 \u5e7f\u544a&lt;\/h3&gt;\n        &lt;div class=&quot;ad-item&quot;&gt;\n            &lt;h4&gt;\u63a8\u8350\u8bfe\u7a0b&lt;\/h4&gt;\n            &lt;p&gt;\u5b66\u4e60 Grid \u5e03\u5c40\uff0c\u63d0\u5347\u524d\u7aef\u6280\u80fd\uff01&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;div class=&quot;ad-item&quot;&gt;\n            &lt;h4&gt;\u6700\u65b0\u6587\u7ae0&lt;\/h4&gt;\n            &lt;p&gt;CSS Grid \u5b8c\u5168\u6307\u5357&lt;\/p&gt;\n        &lt;\/div&gt;\n    &lt;\/aside&gt;\n\n    &lt;footer class=&quot;footer&quot;&gt;\n        &lt;p&gt;&amp;copy; 2024 Grid \u5e03\u5c40\u793a\u4f8b | \u4f7f\u7528 CSS Grid \u6784\u5efa&lt;\/p&gt;\n    &lt;\/footer&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<hr>\n<h2>\u26a0\ufe0f \u91cd\u8981\u6ce8\u610f\u4e8b\u9879<\/h2>\n<h3>1. \u6d4f\u89c8\u5668\u517c\u5bb9\u6027<\/h3>\n<p><strong>\u73b0\u4ee3\u6d4f\u89c8\u5668\u652f\u6301<\/strong>\uff1a<\/p>\n<ul>\n<li>\u2705 Chrome 57+<\/li>\n<li>\u2705 Firefox 52+<\/li>\n<li>\u2705 Safari 10.1+<\/li>\n<li>\u2705 Edge 16+<\/li>\n<\/ul>\n<p><strong>\u68c0\u67e5\u517c\u5bb9\u6027<\/strong>\uff1a<\/p>\n<pre><code class=\"language-css\">\/* \u964d\u7ea7\u5904\u7406 *\/\n.container {\n    display: flex;  \/* \u964d\u7ea7\u65b9\u6848 *\/\n    flex-wrap: wrap;\n}\n\n@supports (display: grid) {\n    .container {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n    }\n}\n<\/code><\/pre>\n<h3>2. Grid vs Flexbox \u9009\u62e9<\/h3>\n<pre><code>\u9009\u62e9 Flexbox \u5f53\uff1a\n\u2705 \u4e00\u7ef4\u5e03\u5c40\uff08\u884c\u6216\u5217\uff09\n\u2705 \u5185\u5bb9\u9a71\u52a8\u5e03\u5c40\n\u2705 \u7b80\u5355\u7684\u5bf9\u9f50\u9700\u6c42\n\n\u9009\u62e9 Grid \u5f53\uff1a\n\u2705 \u4e8c\u7ef4\u5e03\u5c40\uff08\u884c\u548c\u5217\u540c\u65f6\u63a7\u5236\uff09\n\u2705 \u5e03\u5c40\u9a71\u52a8\u5185\u5bb9\n\u2705 \u590d\u6742\u7684\u9875\u9762\u7ed3\u6784\n<\/code><\/pre>\n<h3>3. \u6027\u80fd\u8003\u8651<\/h3>\n<p><strong>Grid \u6027\u80fd\u4f18\u79c0<\/strong>\uff0c\u4f46\u8981\u6ce8\u610f\uff1a<\/p>\n<ul>\n<li>\u907f\u514d\u8fc7\u5ea6\u5d4c\u5957 Grid \u5bb9\u5668<\/li>\n<li>\u5927\u578b\u7f51\u683c\uff08100+ \u9879\u76ee\uff09\u53ef\u80fd\u5f71\u54cd\u6027\u80fd<\/li>\n<li>\u4f7f\u7528 <code>contain<\/code> \u5c5e\u6027\u4f18\u5316\u6e32\u67d3<\/li>\n<\/ul>\n<pre><code class=\"language-css\">.container {\n    contain: layout style paint;  \/* \u9694\u79bb\u6e32\u67d3 *\/\n}\n<\/code><\/pre>\n<h3>4. \u8c03\u8bd5\u6280\u5de7<\/h3>\n<p><strong>\u53ef\u89c6\u5316\u7f51\u683c<\/strong>\uff1a<\/p>\n<pre><code class=\"language-css\">.container {\n    \/* \u663e\u793a\u7f51\u683c\u7ebf\uff08\u5f00\u53d1\u5de5\u5177\uff09 *\/\n    \/* \u5728\u6d4f\u89c8\u5668 DevTools \u4e2d\u542f\u7528 *\/\n}\n\n\/* \u4f7f\u7528 outline \u8c03\u8bd5 *\/\n.item {\n    outline: 2px solid red;\n}\n<\/code><\/pre>\n<hr>\n<h2>\u270d\ufe0f \u7ec3\u4e60\u4efb\u52a1<\/h2>\n<h3>\u57fa\u7840\u7ec3\u4e60<\/h3>\n<ol>\n<li>\n<p><strong>\u521b\u5efa\u57fa\u7840\u7f51\u683c<\/strong><\/p>\n<ul>\n<li>\u521b\u5efa 3\u00d73 \u7684\u7f51\u683c<\/li>\n<li>\u6bcf\u4e2a\u683c\u5b50 100px\uff0c\u95f4\u8ddd 10px<\/li>\n<li>\u7ed9\u6bcf\u4e2a\u683c\u5b50\u4e0d\u540c\u989c\u8272<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u4f7f\u7528 fr \u5355\u4f4d<\/strong><\/p>\n<ul>\n<li>\u521b\u5efa\u4e09\u5217\u5e03\u5c40\uff1a1fr 2fr 1fr<\/li>\n<li>\u6dfb\u52a0\u5185\u5bb9\uff0c\u89c2\u5bdf\u6bd4\u4f8b\u53d8\u5316<\/li>\n<li>\u8c03\u6574\u6d4f\u89c8\u5668\u7a97\u53e3\uff0c\u9a8c\u8bc1\u54cd\u5e94\u5f0f<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u8de8\u8d8a\u884c\u5217<\/strong><\/p>\n<ul>\n<li>\u8ba9\u7b2c\u4e00\u4e2a\u9879\u76ee\u8de8\u8d8a 2 \u5217<\/li>\n<li>\u8ba9\u6700\u540e\u4e00\u4e2a\u9879\u76ee\u8de8\u8d8a 2 \u884c<\/li>\n<li>\u4f7f\u7528 <code>span<\/code> \u5173\u952e\u5b57\u5b9e\u73b0<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3>\u8fdb\u9636\u7ec3\u4e60<\/h3>\n<ol start=\"4\">\n<li>\n<p><strong>\u547d\u540d\u533a\u57df\u5e03\u5c40<\/strong><\/p>\n<ul>\n<li>\u4f7f\u7528 <code>grid-template-areas<\/code> \u521b\u5efa\u9875\u9762\u5e03\u5c40<\/li>\n<li>\u5305\u542b\uff1aheader\u3001sidebar\u3001main\u3001footer<\/li>\n<li>\u5b9e\u73b0\u54cd\u5e94\u5f0f\u5207\u6362<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>auto-fit \u5b9e\u8df5<\/strong><\/p>\n<ul>\n<li>\u4f7f\u7528 <code>auto-fit<\/code> \u548c <code>minmax()<\/code> \u521b\u5efa\u81ea\u9002\u5e94\u5361\u7247\u7f51\u683c<\/li>\n<li>\u6700\u5c0f\u5bbd\u5ea6 200px<\/li>\n<li>\u6d4b\u8bd5\u4e0d\u540c\u5c4f\u5e55\u5c3a\u5bf8<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u5bf9\u9f50\u65b9\u5f0f<\/strong><\/p>\n<ul>\n<li>\u5c1d\u8bd5 <code>justify-content<\/code> \u548c <code>align-content<\/code> \u7684\u4e0d\u540c\u503c<\/li>\n<li>\u4f7f\u7528 <code>justify-self<\/code> \u548c <code>align-self<\/code> \u5355\u72ec\u63a7\u5236\u9879\u76ee<\/li>\n<li>\u521b\u5efa\u5c45\u4e2d\u5e03\u5c40<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3>\u5b9e\u6218\u6311\u6218<\/h3>\n<ol start=\"7\">\n<li>\n<p><strong>\u7167\u7247\u753b\u5eca<\/strong><\/p>\n<ul>\n<li>\u521b\u5efa\u54cd\u5e94\u5f0f\u7167\u7247\u7f51\u683c<\/li>\n<li>\u60ac\u505c\u65f6\u653e\u5927\u56fe\u7247<\/li>\n<li>\u4f7f\u7528 <code>object-fit: cover<\/code> \u4fdd\u6301\u56fe\u7247\u6bd4\u4f8b<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u4eea\u8868\u677f\u5e03\u5c40<\/strong><\/p>\n<ul>\n<li>\u9876\u90e8\uff1a\u6807\u9898\u680f<\/li>\n<li>\u5de6\u4fa7\uff1a\u5bfc\u822a\u83dc\u5355<\/li>\n<li>\u4e2d\u95f4\uff1a\u4e3b\u8981\u5185\u5bb9\u533a\uff082\u00d72 \u7f51\u683c\uff09<\/li>\n<li>\u53f3\u4fa7\uff1a\u7edf\u8ba1\u4fe1\u606f<\/li>\n<li>\u5e95\u90e8\uff1a\u72b6\u6001\u680f<\/li>\n<\/ul>\n<\/li>\n<li>\n<p><strong>\u65e5\u5386\u89c6\u56fe<\/strong><\/p>\n<ul>\n<li>\u521b\u5efa 7 \u5217\u7f51\u683c\uff08\u4e00\u5468\u4e03\u5929\uff09<\/li>\n<li>6 \u884c\uff08\u4e00\u4e2a\u6708\u7ea6 6 \u5468\uff09<\/li>\n<li>\u4eca\u5929\u7684\u65e5\u671f\u9ad8\u4eae\u663e\u793a<\/li>\n<li>\u54cd\u5e94\u5f0f\u8bbe\u8ba1\uff08\u79fb\u52a8\u7aef\u5355\u5217\uff09<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<hr>\n<h2>\ud83d\udca1 \u5e38\u89c1\u95ee\u9898 FAQ<\/h2>\n<h3>Q1: Grid \u548c Flexbox \u53ef\u4ee5\u6df7\u7528\u5417\uff1f<\/h3>\n<p><strong>\u7b54<\/strong>\uff1a\u53ef\u4ee5\uff01\u8fd9\u662f\u6700\u4f73\u5b9e\u8df5\u4e4b\u4e00\u3002<\/p>\n<pre><code class=\"language-css\">\/* Grid \u7528\u4e8e\u6574\u4f53\u5e03\u5c40 *\/\n.page {\n    display: grid;\n    grid-template-columns: 250px 1fr;\n}\n\n\/* Flexbox \u7528\u4e8e\u7ec4\u4ef6\u5185\u90e8 *\/\n.nav {\n    display: flex;\n    flex-direction: column;\n}\n<\/code><\/pre>\n<h3>Q2: \u5982\u4f55\u8ba9 Grid \u9879\u76ee\u81ea\u9002\u5e94\u5185\u5bb9\u5927\u5c0f\uff1f<\/h3>\n<p><strong>\u7b54<\/strong>\uff1a\u4f7f\u7528 <code>auto<\/code> \u5173\u952e\u5b57\u3002<\/p>\n<pre><code class=\"language-css\">.container {\n    grid-template-columns: auto 1fr auto;\n    \/* \u5de6\u53f3\u5217\u6839\u636e\u5185\u5bb9\u5bbd\u5ea6\uff0c\u4e2d\u95f4\u5217\u5360\u5269\u4f59\u7a7a\u95f4 *\/\n}\n<\/code><\/pre>\n<h3>Q3: Grid \u53ef\u4ee5\u5b9e\u73b0\u7011\u5e03\u6d41\u5e03\u5c40\u5417\uff1f<\/h3>\n<p><strong>\u7b54<\/strong>\uff1a\u539f\u751f Grid \u4e0d\u652f\u6301\u7011\u5e03\u6d41\uff0c\u4f46\u53ef\u4ee5\u7528 CSS Columns \u6216 JavaScript \u5e93\uff08\u5982 Masonry.js\uff09\u3002<\/p>\n<pre><code class=\"language-css\">\/* \u4f7f\u7528 CSS Columns \u66ff\u4ee3 *\/\n.waterfall {\n    column-count: 3;\n    column-gap: 20px;\n}\n<\/code><\/pre>\n<h3>Q4: \u4e3a\u4ec0\u4e48\u6211\u7684 Grid \u5e03\u5c40\u5728\u79fb\u52a8\u7aef\u4e71\u4e86\uff1f<\/h3>\n<p><strong>\u7b54<\/strong>\uff1a\u68c0\u67e5\u4ee5\u4e0b\u51e0\u70b9\uff1a<\/p>\n<ul>\n<li>\u662f\u5426\u8bbe\u7f6e\u4e86\u9002\u5f53\u7684 <code>minmax()<\/code> \u503c<\/li>\n<li>\u662f\u5426\u6dfb\u52a0\u4e86\u5a92\u4f53\u67e5\u8be2<\/li>\n<li>\u5bb9\u5668\u5bbd\u5ea6\u662f\u5426\u53d7\u9650<\/li>\n<\/ul>\n<pre><code class=\"language-css\">@media (max-width: 768px) {\n    .grid {\n        grid-template-columns: 1fr;  \/* \u5355\u5217\u5e03\u5c40 *\/\n    }\n}\n<\/code><\/pre>\n<h3>Q5: \u5982\u4f55\u521b\u5efa\u7b49\u9ad8\u5217\uff1f<\/h3>\n<p><strong>\u7b54<\/strong>\uff1aGrid \u9ed8\u8ba4\u5c31\u652f\u6301\u7b49\u9ad8\u5217\uff01<\/p>\n<pre><code class=\"language-css\">.container {\n    display: grid;\n    grid-template-columns: 1fr 1fr 1fr;\n    \/* \u6240\u6709\u5217\u81ea\u52a8\u7b49\u9ad8 *\/\n}\n<\/code><\/pre>\n<hr>\n<h2>\ud83d\udcda \u62d3\u5c55\u9605\u8bfb<\/h2>\n<p><strong>\u63a8\u8350\u8d44\u6e90<\/strong>\uff1a<\/p>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\">CSS Grid \u5b8c\u5168\u6307\u5357\uff08CSS-Tricks\uff09<\/a><\/li>\n<li><a href=\"https:\/\/cssgridgarden.com\/\">Grid Garden &#8211; \u6e38\u620f<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/zh-CN\/docs\/Web\/CSS\/CSS_Grid_Layout\">MDN &#8211; CSS Grid Layout<\/a><\/li>\n<\/ul>\n<p><strong>\u76f8\u5173\u4e3b\u9898<\/strong>\uff1a<\/p>\n<ul>\n<li>Day 15: Flexbox \u5e03\u5c40<\/li>\n<li>Day 18: \u54cd\u5e94\u5f0f\u8bbe\u8ba1\uff08\u66f4\u6df1\u5165\u5b66\u4e60\u5a92\u4f53\u67e5\u8be2\uff09<\/li>\n<li>Day 13: CSS \u57fa\u7840\uff08\u76d2\u6a21\u578b\u548c\u5b9a\u4f4d\uff09<\/li>\n<\/ul>\n<hr>\n<p><strong>\u4e0b\u4e00\u8bfe\u9884\u544a<\/strong>\uff1aDay 17 &#8211; CSS \u52a8\u753b\uff0c\u8ba9\u4f60\u7684\u7f51\u9875\u52a8\u8d77\u6765\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Day 16 &#8211; CSS Grid \u7f51\u683c\u5e03\u5c40 \ud83c\udfaf \u5b66\u4e60\u76ee\u6807 \u7406\u89e3 Grid \u5e03\u5c40\u7684\u6838\u5fc3\u6982\u5ff5\u548c\u4f18\u52bf  &#8230; <a title=\"Day-16-Grid\u7f51\u683c\u5e03\u5c40\" class=\"read-more\" href=\"https:\/\/www.resilence.cn\/?p=260\" aria-label=\"\u7ee7\u7eed\u9605\u8bfbDay-16-Grid\u7f51\u683c\u5e03\u5c40\">\u9605\u8bfb\u66f4\u591a<\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"class_list":["post-260","post","type-post","status-publish","format-standard","hentry","category-studycoding"],"_links":{"self":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts\/260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=260"}],"version-history":[{"count":1,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts\/260\/revisions"}],"predecessor-version":[{"id":261,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=\/wp\/v2\/posts\/260\/revisions\/261"}],"wp:attachment":[{"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.resilence.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}