{"id":2955,"date":"2020-05-18T20:33:23","date_gmt":"2020-05-18T12:33:23","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=2955"},"modified":"2020-05-18T20:33:23","modified_gmt":"2020-05-18T12:33:23","slug":"css-grid%e7%bd%91%e6%a0%bc%e5%b8%83%e5%b1%80%e5%85%a8%e6%94%bb%e7%95%a5","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=2955","title":{"rendered":"CSS Grid\u7f51\u683c\u5e03\u5c40\u5168\u653b\u7565"},"content":{"rendered":"<div class=\"article-content\" data-v-4f8894a8=\"\" data-id=\"5d2e52dc6fb9a07ec42b8e6d\">\n<p>\u51e0\u4e4e\u4ece\u6211\u4eec\u8e0f\u5165\u524d\u7aef\u5f00\u53d1\u8fd9\u4e2a\u9886\u57df\u5f00\u59cb\uff0c\u5c31\u4e0d\u505c\u5730\u63a5\u89e6\u4e0d\u540c\u7684\u5e03\u5c40\u6280\u672f\u3002\u4ece\u5e38\u89c1\u7684\u6d6e\u52a8\u5230\u8868\u683c\u5e03\u5c40\uff0c\u518d\u5230\u5982\u4eca\u5927\u884c\u5176\u9053\u7684flex\u5e03\u5c40\uff0ccss\u5e03\u5c40\u6280\u672f\u4e00\u76f4\u5728\u4e0d\u65ad\u5730\u63a8\u9648\u51fa\u65b0\u3002\u5176\u4e2d\u7f51\u683c\u5e03\u5c40(grid)\u4f5c\u4e3acss3\u7684\u4ea7\u7269\uff0c\u5b83\u66f4\u52a0\u8d34\u8fd1\u7f51\u9875\u8bbe\u8ba1\u5e08\u6240\u4f7f\u7528\u7684\u5e03\u5c40\u7b56\u7565\uff0c\u5b66\u4e60\u5e76\u5229\u7528\u597d\u5b83\u53ef\u4ee5\u8ba9\u6211\u4eec\u514d\u53d7\u5f88\u591a\u5e03\u5c40\u56f0\u6270\u3002<\/p>\n<p>\u867d\u7136\u7f51\u683c\u5e03\u5c40\u597d\u5904\u6709\u5f88\u591a\uff0c\u4f46\u5b66\u4e60\u8d77\u6765\u5e76\u4e0d\u7b80\u5355\uff0c\u539f\u56e0\u662f\u7528\u6765\u8bbe\u7f6e\u5e03\u5c40\u7684\u5c5e\u6027\u5b9e\u5728\u592a\u591a\uff0c\u5176\u4e2d\u5149\u662f\u4f5c\u7528\u4e8e\u7236\u5bb9\u5668\u7684\u5c5e\u6027\u5c31\u670917\u79cd\uff0c\u518d\u52a0\u4e0a\u5b50\u5143\u7d20\u5c5e\u6027\u670910\u79cd\uff0c\u53e6\u5916\u8fd8\u6709\u8fd9\u4e9b\u5c5e\u6027\u503c\u7684\u4e0d\u540c\u53d6\u503c\u65b9\u5f0f\u3002\u8fd9\u4e9b\u5bf9\u4e8e\u8bb0\u5fc6\u6765\u8bf4\u7edd\u5bf9\u662f\u4e2a\u4e0d\u5c0f\u7684\u8d1f\u62c5\u3002\u90a3\u4e48\u8fd9\u4e48\u591a\u5c5e\u6027\u4ee5\u53ca\u7528\u6cd5\uff0c\u8981\u5982\u4f55\u5728\u77ed\u65f6\u95f4\u5185\u6d88\u5316\u6389\u5462\uff1f\u5728\u63a5\u4e0b\u6765\u8fd9\u7bc7\u6587\u7ae0\u91cc\uff0c\u6211\u5c06\u9488\u5bf9\u8fd927\u79cd\u5c5e\u6027\u4ee5\u53ca\u5b83\u4eec\u5404\u81ea\u7684\u7528\u6cd5\uff0c\u5206\u4eab\u6211\u72ec\u5bb6\u7684\u5b66\u4e60\u7b56\u7565\uff0c\u5e0c\u671b\u5bf9\u5927\u5bb6\u7684\u5b66\u4e60\u6709\u6240\u5e2e\u52a9\u3002<\/p>\n<h1 class=\"heading\" data-id=\"heading-0\">\u5e03\u5c40\u4e4b\u9053<\/h1>\n<p>CSS\u4f5c\u4e3a\u4e00\u79cd\u7f51\u9875\u6392\u7248\u8bbe\u8ba1\u8bed\u8a00\uff0c\u5176\u6838\u5fc3\u7684\u8bbe\u8ba1\u601d\u60f3\u5fc5\u7136\u8981\u9075\u5b88\u76f8\u5173\u7684\u9886\u57df\u77e5\u8bc6\u3002\u7f51\u683c\u5e03\u5c40\u662f\u4e00\u79cd\u4e8c\u7ef4\u5e03\u5c40\u7ed3\u6784\uff0c\u5b83\u662f\u7531\u7eb5\u6a2a\u76f8\u4ea4\u7684\u4e24\u7ec4\u7f51\u683c\u7ebf\u5f62\u6210\u7684\u6846\u67b6\u6027\u5e03\u5c40\u7ed3\u6784\u3002\u7f51\u9875\u8bbe\u8ba1\u8005\u53ef\u4ee5\u5229\u7528\u8fd9\u4e9b\u7531\u884c(row)\u548c\u5217(column)\u5f62\u6210\u7684\u6846\u67b6\u6027\u7ed3\u6784\u6765\u5e03\u5c40\u8bbe\u8ba1\u5143\u7d20\u3002 \u5728\u5b9a\u4e49\u4e00\u79cd\u7f51\u683c\u5e03\u5c40\u7ed3\u6784\u7684\u65f6\u5019\uff0c\u6211\u4eec\u9700\u8981\u5728\u7236\u5bb9\u5668\u4e0a\u63cf\u8ff0\u8981\u5e03\u5c40\u7684\u4e3b\u4f53\u6846\u67b6\u7ed3\u6784\u3002\u4e3a\u4e86\u63cf\u8ff0\u8fd9\u4e00\u6846\u67b6\u7ed3\u6784\uff0c\u6211\u4eec\u5c31\u9700\u8981\u7ed9\u5b83\u7684\u57fa\u672c\u6784\u6210\u5143\u7d20\u547d\u540d\u3002\u4e00\u4e2a\u7f51\u683c\u5e03\u5c40\u7684\u6784\u6210\u5143\u7d20\u53ef\u4ee5\u6982\u62ec\u4e3a\u4ee5\u4e0b\u51e0\u79cd\u6982\u5ff5:<\/p>\n<ul>\n<li>row line: \u884c\u7ebf<\/li>\n<li>column line: \u5217\u7ebf<\/li>\n<li>track: \u7f51\u683c\u8f68\u9053\uff0c\u5373\u884c\u7ebf\u548c\u884c\u7ebf\uff0c\u6216\u5217\u7ebf\u548c\u5217\u7ebf\u4e4b\u95f4\u6240\u5f62\u6210\u7684\u533a\u57df\uff0c\u7528\u6765\u6446\u653e\u5b50\u5143\u7d20<\/li>\n<li>gap: \u7f51\u683c\u95f4\u8ddd\uff0c\u884c\u7ebf\u548c\u884c\u7ebf\uff0c\u6216\u5217\u7ebf\u548c\u5217\u7ebf\u4e4b\u95f4\u6240\u5f62\u6210\u7684\u4e0d\u53ef\u5229\u7528\u7684\u533a\u57df\uff0c\u7528\u6765\u5206\u9694\u5143\u7d20<\/li>\n<li>cell: \u7f51\u683c\u5355\u5143\u683c\uff0c\u7531\u884c\u7ebf\u548c\u5217\u7ebf\u6240\u5206\u9694\u51fa\u6765\u7684\u533a\u57df\uff0c\u7528\u6765\u6446\u653e\u5b50\u5143\u7d20<\/li>\n<li>area: \u7f51\u683c\u533a\u57df\uff0c\u7531\u5355\u4e2a\u6216\u591a\u4e2a\u7f51\u683c\u5355\u5143\u683c\u7ec4\u6210\uff0c\u7528\u6765\u6446\u653e\u5b50\u5143\u7d20<\/li>\n<\/ul>\n<p><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/05\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200518203048.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-2957\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/05\/\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200518203048.png\" alt=\"\u256c\u0432\u2568\u253c\u255c\u256a\u2550\u255d_20200518203048\" width=\"572\" height=\"562\" \/><\/a><\/p>\n<p>\u7262\u8bb0\u4e0a\u8ff0\u8fd9\u4e9b\u6982\u5ff5\u662f\u4e4b\u540e\u719f\u7ec3\u638c\u63e1\u548c\u5e94\u7528\u7f51\u683c\u5e03\u5c40\u7684\u57fa\u7840\u3002<\/p>\n<h1 class=\"heading\" data-id=\"heading-1\">\u6784\u5efa\u4e4b\u6cd5<\/h1>\n<p>\u8981\u719f\u7ec3\u638c\u63e1\u4e00\u95e8\u6280\u672f\uff0c\u6838\u5fc3\u662f\u627e\u5230\u6700\u57fa\u672c\u7684\u5957\u8def\uff0c\u7136\u540e\u4e0d\u65ad\u7ec3\u4e60\u4ece\u800c\u53ef\u4ee5\u5728\u4e4b\u540e\u7684\u5b9e\u8df5\u8fc7\u7a0b\u4e2d\u51cf\u5c11\u51b3\u7b56\u7684\u65f6\u95f4\u3002\u6240\u4ee5\uff0c\u8fd9\u4e00\u90e8\u5206\u4e3b\u8981\u5c31\u662f\u4ecb\u7ecd\u7f51\u683c\u5e03\u5c40\u6784\u5efa\u8fc7\u7a0b\u4e2d\u7684\u4e00\u4e9b\u5e38\u7528\u5957\u8def\u3002 \u8fd9\u91cc\u6211\u4eec\u8981\u89e3\u51b3\u7684\u95ee\u9898\u662f\uff0c\u5982\u4f55\u5229\u7528\u6700\u57fa\u672c\u7684\u89c4\u5219\u6765\u6784\u5efa\u51fa\u7406\u60f3\u7684\u5e03\u5c40\u6a21\u578b\u3002\u5728\u5e03\u5c40\u8fc7\u7a0b\u4e2d\uff0c\u5f52\u6839\u7ed3\u5e95\u9700\u8981\u5904\u7406\u7684\u5c31\u4e24\u79cd\u9875\u9762\u5143\u7d20\uff1a\u7236\u5bb9\u5668\u548c\u5b50\u5143\u7d20\u3002\u524d\u8005\u4e3b\u8981\u7528\u6765\u8bbe\u7f6e\u57fa\u7840\u7684\u5e03\u5c40\u6846\u67b6\uff0c\u76f8\u5f53\u4e8e\u5efa\u7b51\u4e2d\u7684\u8bbe\u8ba1\u84dd\u56fe\uff0c\u800c\u540e\u8005\u5c31\u662f\u7528\u6765\u8fdb\u884c\u4e2a\u6027\u5316\u7684\u5e03\u5c40\u8c03\u6574\u3002\u56e0\u6b64\u6211\u4e2a\u4eba\u5f52\u7eb3\u4e86\u5728\u4f7f\u7528\u7f51\u683c\u5e03\u5c40\u8fc7\u7a0b\u4e2d\u7684\u5957\u8def\u662f\uff1a\u9488\u5bf9\u7236\u5bb9\u5668\u5143\u7d20\u8fdb\u884c\u8bbe\u7f6e\u9700\u8981\u4e09\u4e2a\u6b65\u9aa4\uff1a\u5b9a\u6846\u67b6\u3001\u8bbe\u95f4\u9694\u548c\u627e\u5bf9\u9f50\uff0c\u5bf9\u5b50\u5143\u7d20\u6765\u8bf4\u6709\u4e24\u4e2a\u6b65\u9aa4\uff1a\u6446\u4f4d\u7f6e\u548c\u627e\u5bf9\u9f50\u3002\u6211\u628a\u5b83\u4eec\u7edf\u79f0\u4e3a**&#8221;32\u6784\u5efa\u4e4b\u6cd5&#8221;**\u3002<\/p>\n<p>\u5728\u8fd9\u4e00\u5c0f\u8282\u4e2d\uff0c\u6211\u5c06\u628a\u91cd\u5fc3\u4e3b\u8981\u653e\u5728\u7f51\u683c\u5e03\u5c40\u4e2d\u6240\u6709\u7528\u5230\u768427\u4e2a\u5c5e\u6027\u540d\u7684\u8bb2\u89e3\u4e0a\uff0c\u800c\u53d6\u503c\u903b\u8f91\u5c06\u5728\u6700\u540e\u4e00\u90e8\u5206\u8fdb\u884c\u7edf\u4e00\u4ecb\u7ecd\u3002<\/p>\n<h2 class=\"heading\" data-id=\"heading-2\">\u7236\u5bb9\u5668<\/h2>\n<h3 class=\"heading\" data-id=\"heading-3\">\u5b9a\u6846\u67b6<\/h3>\n<p>\u8bbe\u7f6e\u7236\u5bb9\u5668\u7684\u7f51\u683c\u5e03\u5c40\u7684\u7b2c\u4e00\u6b65\u5c31\u662f\u5c06\u7236\u5bb9\u5668\u7684\u76d2\u6a21\u578b\u8bbe\u7f6e\u4e3a<code>grid<\/code>\uff0c\u8fd9\u6837\u5c31\u80fd\u89e6\u53d1\u6e32\u67d3\u5f15\u64ce\u7684\u7f51\u683c\u5e03\u5c40\u7b97\u6cd5\u3002<\/p>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-selector-class\">.parent {\r\n\t<span class=\"hljs-attribute\">display: grid;\r\n}\r\n\r\n<\/span><\/span><\/code><\/pre>\n<p>\u63a5\u7740\u6211\u4eec\u8981\u5f00\u59cb\u51c6\u5907**&#8221;\u753b\u7ebf&#8221;**\uff0c\u5373\u8bbe\u7f6e\u6240\u9700\u884c\u548c\u5217\u7684\u57fa\u7840\u7ebf\u3002\u8fd9\u4e9b\u7ebf\u6761\u5c06\u6784\u6210\u6211\u4eec\u63a5\u4e0b\u6765\u8fdb\u884c\u5e03\u5c40\u6392\u5e03\u7684\u57fa\u7840\u6a21\u677f\uff08template\uff09\u3002\u5728\u753b\u7ebf\u8fc7\u7a0b\u4e2d\uff0c\u6211\u4eec\u9700\u8981\u5206\u522b\u6839\u636e\u884c(row)\u548c\u5217(column)\u4e24\u4e2a\u7ef4\u5ea6\u8fdb\u884c\u8bbe\u7f6e\u3002\u4f60\u9700\u8981\u753b\u51e0\u6761\u7ebf\uff0c\u5c31\u8bbe\u7f6e\u51e0\u4e2a\u503c\uff08\u4e0d\u5305\u62ec\u8fb9\u6846\uff09\uff0c\u5176\u53d6\u503c\u662f\u8f68\u9053(track)\u7684\u5927\u5c0f\u3002\u8fd9\u91cc\u6211\u5148\u753b\u51fa\u4e00\u4e2a3&#215;3\u7684\u7f51\u683c\u6846\u67b6\uff0c\u4ee3\u7801\u5982\u4e0b:<\/p>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-selector-class\">.parent {\r\n\t<span class=\"hljs-attribute\">display: grid;\r\n\tgrid-template-rows: <span class=\"hljs-number\">100px 100px 100px;\r\n\tgrid-template-columns: 100px 100px 100px;\r\n}\r\n\r\n<\/span><\/span><\/span><\/code><\/pre>\n<p>\u5728\u8fd9\u91cc\u4f60\u4e5f\u53ef\u4ee5\u9009\u62e9\u4f7f\u7528\u7f29\u5199\u5f62\u5f0f\u540c\u65f6\u4e3a\u884c\u548c\u5217\u8bbe\u7f6e\u503c\uff0c\u91c7\u7528<code>\/<\/code>\u5206\u9694\u5f00:<\/p>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-selector-class\">.parent {\r\n\t<span class=\"hljs-attribute\">display: grid;\r\n\tgrid-template: <span class=\"hljs-number\">100px 100px 100px \/ 100px 100px 100px;\r\n}\r\n\r\n<\/span><\/span><\/span><\/code><\/pre>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"lazyload inited loaded\" src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a665dd55abf?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" alt=\"image.png\" data-src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a665dd55abf?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" data-width=\"277\" data-height=\"280\" \/><\/p>\n<p>\u753b\u5b8c\u7ebf\u540e\uff0c\u4e0b\u4e00\u6b65\u6211\u4eec\u53ef\u4ee5\u9009\u62e9\u4e3a\u8fd9\u4e9b\u7ebf\u6761\u548c\u7ebf\u6761\u4e4b\u95f4\u5f62\u6210\u7684\u7f51\u683c\u533a\u57df(area)\u8fdb\u884c\u547d\u540d\uff0c\u8fd9\u6837\u5728\u540e\u7eed\u4f7f\u7528\u7684\u65f6\u5019\u5c31\u80fd\u76f4\u63a5\u4f7f\u7528\u8fd9\u4e9b\u540d\u5b57\uff0c\u4fbf\u4e8e\u5b50\u5143\u7d20\u7684\u5b9a\u4f4d\u3002<\/p>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-selector-class\">.parent {\r\n\t<span class=\"hljs-attribute\">display: grid;\r\n\tgrid-template-areas: <span class=\"hljs-string\">\"a a b\"\r\n\t                     \"c d e\"\r\n\t                     \"c d .\"\r\n}\r\n\r\n<\/span><\/span><\/span><\/code><\/pre>\n<p>\u4e0a\u9762\u8fd9\u4e24\u6b65\u753b\u7ebf\u548c\u547d\u540d\u540c\u6837\u53ef\u4ee5\u91c7\u7528\u7f29\u5199\u5f62\u5f0f\u8fdb\u884c\u8bbe\u7f6e\uff0c\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-selector-class\">.parent {\r\n  \t<span class=\"hljs-attribute\">display: grid;\r\n  \tgrid-template: <span class=\"hljs-string\">\"a a b\" <span class=\"hljs-number\">101px\r\n  \t               \"c d e\" 102px\r\n  \t               \"c d .\" 103px \/ 104px 105px 105px\r\n}\r\n\r\n<\/span><\/span><\/span><\/span><\/code><\/pre>\n<p>\u56e0\u4e3a\u4f7f\u7528<code>grid-template<\/code>\u540c\u65f6\u8bbe\u7f6e\u884c\u5217\u548c\u533a\u57df\u540d\u7684\u5199\u6cd5\u6bd4\u8f83\u590d\u6742\uff0c\u4e3a\u4e86\u8bb2\u89e3\u65b9\u4fbf\uff0c\u6211\u628a\u503c\u8bbe\u7f6e\u6210\u89c4\u5f8b\u7684\u9012\u589e\u6570\u5b57\u3002\u5176\u4e2d<code>(101, 102\uff0c103)<\/code>\u8bbe\u7f6e\u7684\u662f<code>grid-template-rows<\/code>\u7684\u503c\uff0c\u800c<code>(104,105,106)<\/code>\u8bbe\u7f6e\u7684\u5219\u662f<code>grid-template-columns<\/code>\u7684\u503c\u3002<\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"lazyload inited loaded\" src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a665e1be7d8?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" alt=\"image.png\" data-src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a665e1be7d8?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" data-width=\"341\" data-height=\"330\" \/><\/p>\n<p>\u5230\u8fd9\u4e00\u6b65\uff0c\u6211\u4eec\u53ef\u4ee5\u8bf4\u5df2\u7ecf\u5b8c\u6210\u6240\u9700\u5de5\u4f5c\u7684\u4e00\u5927\u534a\u4e86\u3002<\/p>\n<h3 class=\"heading\" data-id=\"heading-4\">\u8bbe\u95f4\u9694<\/h3>\n<p>\u95f4\u8ddd(gap)\u7684\u8bbe\u7f6e\u5728\u5b9e\u9645\u5f00\u53d1\u4e2d\u662f\u53ef\u9009\u7684\uff0c\u4e3b\u8981\u6839\u636e\u7f51\u9875\u8bbe\u8ba1\u7684\u9700\u6c42\u800c\u5b9a\u3002\u5982\u679c\u4f60\u9700\u8981\u7ed9\u7f51\u683c\u7ebf\u4e4b\u95f4\u8bbe\u7f6e\u95f4\u8ddd\uff0c\u6211\u4eec\u53ef\u4ee5\u5728\u884c\u5217\u4e24\u4e2a\u7ef4\u5ea6\u4e0a\u5206\u522b\u8fdb\u884c\u8bbe\u7f6e, \u4e0b\u9762\u8fd9\u6bb5\u4ee3\u7801\u5c06\u7ed9\u6bcf\u4e2a\u884c\u548c\u5217\u5206\u522b\u8bbe\u7f6e10px\u7684\u95f4\u9694:<\/p>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-selector-class\">.parent {\r\n\t<span class=\"hljs-attribute\">display: grid;\r\n\tgrid-template: <span class=\"hljs-number\">100px 100px 100px \/ 100px 100px 100px;\r\n\tgrid-row-gap: 10px;\r\n\tgrid-column-gap: 10px;\r\n}\r\n\r\n<\/span><\/span><\/span><\/code><\/pre>\n<p>\u5982\u679c\u91c7\u7528\u7f29\u5199\u5f62\u5f0f\uff0c\u4e0a\u8ff0\u4ee3\u7801\u53c8\u53ef\u4ee5\u7b80\u5316\u6210:<\/p>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-selector-class\">.parent {\r\n\t<span class=\"hljs-attribute\">display: grid;\r\n\tgrid-template: <span class=\"hljs-number\">100px 100px 100px \/ 100px 100px 100px;\r\n\tgrid-gap: 10px 10px;\r\n}\r\n\r\n<\/span><\/span><\/span><\/code><\/pre>\n<p>\u8bbe\u7f6e\u540e\u7684\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"lazyload inited loaded\" src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a665eea6828?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" alt=\"\" data-src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a665eea6828?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" data-width=\"295\" data-height=\"296\" \/><\/p>\n<h3 class=\"heading\" data-id=\"heading-5\">\u627e\u5bf9\u9f50<\/h3>\n<p>\u6709\u4e86\u524d\u9762\u4e24\u4e2a\u6b65\u9aa4\uff0c\u6211\u4eec\u7684\u7f51\u683c\u5e03\u5c40\u6846\u67b6\u57fa\u672c\u4e0a\u7b97\u662f\u642d\u5efa\u5f97\u5dee\u4e0d\u591a\u4e86\u3002\u6bcf\u4e2a\u5b50\u5143\u7d20\u90fd\u4f1a\u9ed8\u8ba4\u5360\u636e\u4e00\u4e2a\u7f51\u683c\u533a\u57df\u3002\u800c\u5728\u7236\u5bb9\u5668\u8fd9\u91cc\u6211\u4eec\u5982\u679c\u6709\u9700\u8981\uff0c\u5c31\u8981\u8fdb\u884c\u6700\u540e\u4e00\u4e2a\u6b65\u9aa4\uff1a\u627e\u5bf9\u9f50\u3002\u6240\u8c13\u5bf9\u9f50\u65b9\u5f0f\uff0c\u53ef\u4ee5\u5206\u4e3a\u5185\u90e8\u548c\u5916\u90e8\u4e24\u79cd\uff08\u524d\u8005\u662f\u9488\u5bf9\u6bcf\u4e2a\u7f51\u683c\u533a\u57df\u7684\u5b50\u5143\u7d20\u800c\u8a00\uff0c\u800c\u540e\u8005\u662f\u76f8\u5bf9\u4e8e\u7f51\u683c\u533a\u57df\u672c\u8eab\uff09\u3002\u53e6\u5916\u5728\u884c\u548c\u5217\uff08\u66f4\u4e13\u4e1a\u7684\u672f\u8bed\u662fmain axis\u548ccross axis)\u4e0a\u53c8\u5404\u81ea\u6709\u4e24\u4e2a\u7ef4\u5ea6\uff0c\u8fd9\u5c31\u6784\u6210\u4e864\u79cd\u8bbe\u7f6e\u5bf9\u9f50\u7684\u65b9\u5f0f\u3002<\/p>\n<p>\u5148\u6765\u5904\u7406\u4e00\u4e0b\u6bcf\u4e2a\u5b50\u5143\u7d20\u76f8\u5bf9\u7f51\u683c\u533a\u57df\u5185\u90e8\u7684\u5bf9\u9f50\u65b9\u5f0f:<\/p>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-selector-class\">.parent {\r\n\t<span class=\"hljs-attribute\">display: grid;\r\n\tgrid-template: <span class=\"hljs-number\">100px 100px 100px \/ 100px 100px 100px;\r\n\tgrid-gap: 10px 10px;\r\n\tjustify-items: center;\r\n\talign-items: center;\r\n}\r\n\r\n<\/span><\/span><\/span><\/code><\/pre>\n<p>\u5728\u4e0a\u9762\u7684\u4ee3\u7801\u4e2d\u6211\u5206\u522b\u5728\u884c\u548c\u5217\u65b9\u5411\u4e0a\u90fd\u8bbe\u7f6e\u4e86\u5c45\u4e2d\u5bf9\u9f50\uff0c\u8fd9\u6837\u6bcf\u4e2a\u7f51\u683c\u533a\u57df\u4e2d\u7684\u5b50\u5143\u7d20\u76f8\u5bf9\u4e8e\u5404\u81ea\u7684\u533a\u57df\u884c\u4e3a\u662f\u4e00\u81f4\u7684\uff0c\u90fd\u80fd\u5747\u5300\u6392\u5e03\u3002\u53ef\u4ee5\u770b\u5230\u6548\u679c\u5982\u4e0b\u56fe\u6240\u793a\uff1a<\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"lazyload inited loaded\" src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a667f40e478?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" alt=\"image.png\" data-src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a667f40e478?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" data-width=\"278\" data-height=\"280\" \/><\/p>\n<p>\u518d\u6765\u770b\u4e00\u4e0b\u53e6\u4e00\u79cd\u60c5\u51b5:<\/p>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-selector-class\">.parent {\r\n\t<span class=\"hljs-attribute\">display: grid;\r\n\twidth: <span class=\"hljs-number\">500px;\r\n\theight: 500px;\r\n\tgrid-template: 100px 100px 100px \/ 100px 100px 100px;\r\n\tgrid-gap: 10px 10px;\r\n\tjustify-content: space-between;\r\n\talign-content: center;\r\n}\r\n\r\n<\/span><\/span><\/span><\/code><\/pre>\n<p>\u6709\u65f6\u5019\u6211\u4eec\u8bbe\u7f6e\u7684\u7f51\u683c\u4e0d\u8db3\u4ee5\u8986\u76d6\u6574\u4e2a\u7236\u5bb9\u5668\u7684\u5927\u5c0f\u65f6\uff0c\u6bd4\u5982\u5728\u4e0a\u8ff0\u7684\u4f8b\u5b50\u4e2d\u6574\u4e2a\u7236\u5bb9\u5668\u6709<code>500px*500px<\/code>\u7684\u5927\u5c0f\uff0c\u800c\u6211\u4eec\u53ea\u8bbe\u7f6e\u4e86<code>300px*300px<\/code>\u7684\u7f51\u683c\u533a\u57df\uff0c\u8fd9\u65f6\u5019\u5c31\u9700\u8981\u6307\u5b9a\u591a\u51fa\u6765\u7a7a\u95f4\u7684\u5904\u7406\u89c4\u5219\u3002<code>justify-content<\/code>\u548c<code>align-content<\/code>\u5c31\u662f\u5206\u522b\u5728\u884c\u548c\u5217\u4e24\u4e2a\u65b9\u5411\u4e0a\u7528\u6765\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\u7684\u5c5e\u6027\u3002\u5b83\u4eec\u5c06\u9488\u5bf9\u6bcf\u4e2a\u7f51\u683c\u533a\u57df\u53bb\u8bbe\u7f6e\u5176\u5728\u7236\u5bb9\u5668\u4e2d\u7684\u5bf9\u9f50\u65b9\u5f0f\u3002<\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"lazyload inited loaded\" src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a6660147e72?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" alt=\"image.png\" data-src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a6660147e72?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" data-width=\"454\" data-height=\"466\" \/><\/p>\n<p><code>justify<\/code>\u548c<code>align<\/code>\u8fd9\u4e24\u4e2a\u5355\u8bcd\u5728\u65b9\u5411\u4e0a\u6bd4\u8f83\u5bb9\u6613\u641e\u6df7\uff0c\u6240\u4ee5\u6211\u5728\u8bb0\u5fc6\u4e0a\u91c7\u53d6\u7684\u65b9\u5f0f\u662f\u8bb0\u4f4f<code>justifyrow<\/code>\u548c<code>aligncolumn<\/code>\u8fd9\u4e24\u4e2a\u5408\u5e76\u8bcd\uff0c\u5b83\u4eec\u957f\u5ea6\u5dee\u4e0d\u591a\u3002\u5982\u679c\u4f60\u6709\u66f4\u597d\u7684\u8bb0\u5fc6\u65b9\u5f0f\uff0c\u8bf7\u7559\u8a00\u544a\u8bc9\u6211\u3002<\/p>\n<h2 class=\"heading\" data-id=\"heading-6\">\u5b50\u5143\u7d20<\/h2>\n<p>\u6211\u4eec\u901a\u8fc7\u5728\u7236\u5bb9\u5668\u4e0a\u642d\u5efa\u597d\u4e86\u57fa\u7840\u7684\u6846\u67b6\u540e\uff0c\u5bf9\u4e8e\u5927\u90e8\u5206\u5b50\u5143\u7d20\u6765\u8bf4\uff0c\u5c31\u5df2\u7ecf\u80fd\u591f\u5f88\u597d\u5730\u6ee1\u8db3\u5e03\u5c40\u8981\u6c42\u4e86\u3002\u9488\u5bf9\u90e8\u5206\u5b50\u5143\u7d20\uff0c\u53ef\u4ee5\u6839\u636e\u9700\u6c42\u8fdb\u884c\u5fae\u8c03\u3002\u5982\u679c\u8981\u5728\u5b50\u5143\u7d20\u4e0a\u8fdb\u884c\u5e03\u5c40\u5fae\u8c03\uff0c\u901a\u5e38\u9700\u8981\u4ee5\u4e0b\u4e24\u4e2a\u6b65\u9aa4\uff1a\u6446\u4f4d\u7f6e\u548c\u627e\u5bf9\u9f50\u3002<\/p>\n<h3 class=\"heading\" data-id=\"heading-7\">\u6446\u4f4d\u7f6e<\/h3>\n<p>\u50cf\u4e0b\u68cb\u4e00\u6837\uff0c\u9488\u5bf9\u5b50\u5143\u7d20\u7684\u6392\u5e03\uff0c\u6211\u4eec\u9700\u8981\u7ed9\u5b83\u4eec\u6307\u5b9a\u8981\u6446\u653e\u7684\u5177\u4f53\u4f4d\u7f6e\u3002\u8981\u786e\u5b9a\u5177\u4f53\u4f4d\u7f6e\uff0c\u53ef\u4ee5\u5229\u7528\u4e4b\u524d\u5728\u7236\u5bb9\u5668\u4e2d\u6240\u6307\u5b9a\u7684\u7ebf\u540d\u548c\u533a\u57df\u540d\u6765\u5b9a\u4f4d\u3002\u4e00\u79cd\u65b9\u5f0f\u662f\u76f4\u63a5\u901a\u8fc7\u8bbe\u7f6e\u8d77\u59cb\u884c\uff0c\u7ed3\u675f\u884c\u548c\u8d77\u59cb\u5217\uff0c\u7ed3\u675f\u5217\u6765\u7ed9\u5b50\u5143\u7d20\u5212\u5b9a\u5b83\u6240\u8981\u6446\u653e\u7684\u533a\u57df\uff0c\u53e6\u5916\u4e00\u79cd\u65b9\u5f0f\u662f\u6307\u5b9a\u8981\u6446\u653e\u7684\u533a\u57df\u540d\u3002<\/p>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-comment\">\/* \u6307\u5b9a\u8d77\u59cb\u884c\uff0c\u7ed3\u675f\u884c\uff0c\u8d77\u59cb\u5217\uff0c\u7ed3\u675f\u5217 *\/\r\n<span class=\"hljs-selector-class\">.child<span class=\"hljs-selector-pseudo\">:first-child {\r\n    <span class=\"hljs-attribute\">grid-row-start: <span class=\"hljs-number\">1;\r\n    grid-row-end: 2;\r\n    grid-column-start: 1;\r\n    grid-column-end: 3;\r\n    background: red;\r\n}\r\n\r\n\/* \u4f7f\u7528\u7f29\u5199\u5f62\u5f0f *\/\r\n.child:nth-child(2) {\r\n\tgrid-row: 2\/3;\r\n\tgrid-column: 2\/4;\r\n\tbackground: yellow;\r\n}\r\n\r\n\/* \u76f4\u63a5\u6307\u5b9a\u533a\u57df\u540d *\/\r\n.child:nth-child(3) {\r\n\tgrid-area: i;\r\n\tbackground: green;\r\n}\r\n\r\n<\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<p>\u8fd9\u6bb5\u4ee3\u7801\u7684\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p><img decoding=\"async\" class=\"lazyload inited loaded\" src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66848d500b?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" alt=\"image.png\" data-src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66848d500b?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" data-width=\"350\" data-height=\"346\" \/><\/p>\n<p>\u8fd8\u6709\u4e00\u79cd\u66f4\u52a0\u7075\u6d3b\u7684\u8bbe\u7f6e\u4f4d\u7f6e\u65b9\u5f0f\uff0c\u662f\u6307\u5b9a\u8de8\u8d8a\u7684\u884c\u6570\u548c\u5217\u6570\uff0c\u5173\u952e\u5b57<code>span<\/code>\u7528\u6765\u63a7\u5236\u4e00\u6b21\u8de8\u8d8a\u7684\u884c\u6570\u6216\u5217\u6570, \u5982\u4e0a\u9762\u7b2c\u4e09\u4e2a\u5b50\u5143\u7d20\u53ef\u4ee5\u6539\u5199\u6210:<\/p>\n<pre><code class=\"hljs bash copyable\" lang=\"bash\">.child-nth-child(3) {\r\n  grid-row: 2\/3;\r\n  grid-column: span 2;\r\n}\r\n\r\n<\/code><\/pre>\n<h3 class=\"heading\" data-id=\"heading-8\">\u627e\u5bf9\u9f50<\/h3>\n<p>\u548c\u7236\u5bb9\u5668\u4e2d\u6240\u8bbe\u7f6e\u7684\u5bf9\u9f50\u65b9\u5f0f\u7c7b\u4f3c\uff0c\u9488\u5bf9\u4e2a\u522b\u5b50\u5143\u7d20\u7684\u5bf9\u9f50\u5904\u7406\uff0c\u6211\u4eec\u53ef\u4ee5\u6309\u7167\u884c\u5217\u4e24\u7ec4\u5c5e\u6027\u8fdb\u884c\u5206\u522b\u5904\u7406\uff1a<\/p>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-comment\">\/* \u5217\u5bf9\u9f50 *\/\r\n<span class=\"hljs-selector-class\">.child<span class=\"hljs-selector-pseudo\">:nth-child(1) {\r\n  <span class=\"hljs-attribute\">align-self: end;\r\n}\r\n\r\n\/* \u884c\u5bf9\u9f50 *\/\r\n.child:nth-child(2) {\r\n  justify-self: end;\r\n}\r\n\r\n\/* \u91c7\u7528\u7f29\u5199\u5f62\u5f0f *\/\r\n.child:nth-child(3) {\r\n  place-self: center center;\r\n}\r\n\r\n<\/span><\/span><\/span><\/span><\/code><\/pre>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"lazyload inited loaded\" src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66851eea98?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" alt=\"image.png\" data-src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66851eea98?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" data-width=\"277\" data-height=\"282\" \/><\/p>\n<h3 class=\"heading\" data-id=\"heading-9\"><em>*\u9690\u5f0f\u7f51\u683c<\/em><\/h3>\n<p>\u7075\u6d3b\u6027\u662f\u7f51\u683c\u5e03\u5c40\u7684\u4e00\u5927\u4f18\u52bf\uff0c\u9664\u4e86\u91c7\u7528\u4e0a\u8ff0\u90a3\u79cd\u624b\u52a8\u6307\u5b9a\u6846\u67b6\u7ed3\u6784\u7684\u65b9\u5f0f\uff0c\u7f51\u683c\u5e03\u5c40\u8fd8\u6709\u4e00\u5957\u81ea\u52a8\u5316\u5e03\u5c40\u7684\u673a\u5236\uff0c\u8fd9\u5957\u673a\u5236\u79f0\u4e3a**\u201c\u9690\u5f0f\u7f51\u683c\u5e03\u5c40\u201d**\u3002\u5f53\u6211\u4eec\u5728\u7f51\u683c\u5b9a\u4e49\u7684\u533a\u57df\u5916\u653e\u7f6e\u5b50\u5143\u7d20\u65f6\uff0c\u6216\u56e0\u5b50\u5143\u7d20\u6570\u91cf\u8fc7\u591a\u800c\u9700\u8981\u66f4\u591a\u7684\u7f51\u683c\u7ebf\u65f6\uff0c\u5e03\u5c40\u7b97\u6cd5\u5c31\u4f1a\u81ea\u52a8\u751f\u6210\u9690\u5f0f\u7f51\u683c\u3002\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u8fd9\u4e9b\u9690\u5f0f\u7f51\u683c\u7684\u5927\u5c0f\u4e5f\u4f1a\u968f\u7740\u5185\u5bb9\u5c3a\u5bf8\u4e0d\u540c\u800c\u53d8\u5316\uff0c\u800c\u6211\u4eec\u53ef\u4ee5\u5229\u7528\u5c5e\u6027<code>grid-auto-rows<\/code>\u548c<code>grid-auto-columns<\/code>\u6765\u63a7\u5236\u9690\u5f0f\u7f51\u683c\u7684\u5927\u5c0f\u3002 \u8003\u8651\u4e0b\u9762\u8fd9\u4e2a\u4f8b\u5b50\uff1a<\/p>\n<pre><code class=\"hljs html copyable xml\" lang=\"html\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div <span class=\"hljs-attr\">class=<span class=\"hljs-string\">\"parent\"&gt;\r\n  &lt;div class=\"child\" style=\"background: red\"&gt;&lt;\/div&gt;\r\n  &lt;div class=\"child\" style=\"background: yellow\"&gt;&lt;\/div&gt;\r\n  &lt;div class=\"child\" style=\"background: green\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n<\/span><\/span><\/span><\/span><\/code><\/pre>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-selector-class\">.parent {\r\n  <span class=\"hljs-attribute\">display: grid;\r\n  grid-auto-rows: <span class=\"hljs-number\">100px;\r\n  grid-auto-columns: 100px;\r\n}\r\n\r\n<\/span><\/span><\/span><\/code><\/pre>\n<p>\u901a\u8fc7\u624b\u52a8\u5728\u7236\u5bb9\u5668\u4e2d\u8bbe\u7f6e\u9690\u5f0f\u7f51\u683c\u5927\u5c0f\u4e3a100&#215;100\u7684\u5927\u5c0f\u540e\uff0c\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"lazyload inited loaded\" src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a6688179b31?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" alt=\"image.png\" data-src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a6688179b31?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" data-width=\"97\" data-height=\"275\" \/><\/p>\n<\/div>\n<div class=\"article-content\" data-v-4f8894a8=\"\" data-id=\"5d2e52dc6fb9a07ec42b8e6d\">\n<p>\u5982\u679c\u5b50\u5143\u7d20\u5f15\u7528\u4e86\u4e0d\u5b58\u5728\u7684\u884c\u53f7\u548c\u5217\u53f7\uff0c\u7236\u5bb9\u5668\u4f1a\u81ea\u52a8\u751f\u6210\u9690\u5f0f\u7f51\u683c\u4ee5\u5bb9\u7eb3\u6240\u6709\u5b50\u5143\u7d20:<\/p>\n<pre><code class=\"hljs bash copyable\" lang=\"bash\">.child:first-child {\r\n    grid-row-start: 1;\r\n    grid-row-end: 2;\r\n    grid-column-start: 1;\r\n    grid-column-end: 3;\r\n    background: red;\r\n}\r\n\r\n<\/code><\/pre>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"lazyload inited loaded\" src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a668835e92e?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" alt=\"image.png\" data-src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a668835e92e?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" data-width=\"183\" data-height=\"187\" \/><\/p>\n<p>\u6709\u4e86\u7f51\u683c\u5927\u5c0f\u7684\u63a7\u5236\uff0c\u6211\u4eec\u8fd8\u9700\u8981\u4f4d\u7f6e\u7684\u63a7\u5236\u3002\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u5b50\u5143\u7d20\u90fd\u662f\u5148\u5c06\u884c\u586b\u5145\u6ee1\uff0c\u5bb9\u5668\u5927\u5c0f\u4e0d\u591f\u7684\u65f6\u5019\u624d\u4f1a\u751f\u6210\u65b0\u7684\u9690\u5f0f\u884c\u3002\u5982\u679c\u8981\u6539\u53d8\u8fd9\u4e00\u9ed8\u8ba4\u884c\u4e3a\uff0c\u6211\u4eec\u9700\u8981\u4f7f\u7528<code>grid-auto-flow<\/code>\u5c5e\u6027\u6765\u63a7\u5236:<\/p>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-selector-class\"><span class=\"hljs-selector-class\">.parent<\/span> {\r\n  <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">display<\/span>: grid;\r\n  <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-auto-rows<\/span>: <span class=\"hljs-number\"><span class=\"hljs-number\">100px<\/span>;\r\n  <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-auto-columns<\/span>: <span class=\"hljs-number\"><span class=\"hljs-number\">100px<\/span>;\r\n  <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-template-areas<\/span>: <span class=\"hljs-string\"><span class=\"hljs-string\">\"a b c\"<\/span> <span class=\"hljs-string\"><span class=\"hljs-string\">\"d e f\"<\/span> <span class=\"hljs-string\"><span class=\"hljs-string\">\"g h i\"<\/span>;\r\n  <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-auto-flow<\/span>: column;\r\n}\r\n<span class=\"copy-code-btn\">\u00a0<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<p><img decoding=\"async\" class=\"lazyload inited loaded\" src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a6691869293?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" alt=\"image.png\" data-src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a6691869293?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" data-width=\"280\" data-height=\"276\" \/><\/p>\n<h1 class=\"heading\" data-id=\"heading-10\">\u53d6\u503c\u4e4b\u672f<\/h1>\n<p>\u4ecb\u7ecd\u5b8c\u6240\u6709\u7684\u7f51\u683c\u5e03\u5c40\u5c5e\u6027\u540e\uff0c\u6211\u4eec\u518d\u6765\u8bf4\u4e00\u4e0b\u5404\u79cd\u5c5e\u6027\u7684\u53d6\u503c\u7b56\u7565\u3002<\/p>\n<h2 class=\"heading\" data-id=\"heading-11\">\u5927\u5c0f<\/h2>\n<p>\u5728CSS\u4e2d\uff0c\u6211\u4eec\u901a\u5e38\u4f7f\u7528px,em\u7b49\u53d6\u503c\u5355\u4f4d\u8fdb\u884c\u5c5e\u6027\u5927\u5c0f\u7684\u8bbe\u7f6e\uff0c\u5bf9\u4e8e\u7075\u6d3b\u7684\u5e03\u5c40\u9700\u6c42\u6765\u8bf4\uff0c\u767e\u5206\u6bd4\u4e5f\u662f\u5e38\u7528\u7684\u53d6\u503c\u5355\u4f4d\u3002\u8fd9\u4e9b\u5355\u4f4d\u5728\u5e73\u5e38\u5de5\u4f5c\u4e2d\u4f3c\u4e4e\u5df2\u7ecf\u8db3\u591f\u7528\u4e86\u3002\u4e0d\u8fc7\uff0c\u4e3a\u4e86\u8ba9\u5e03\u5c40\u80fd\u591f\u66f4\u52a0\u7075\u6d3b\uff0c\u7f51\u683c\u5e03\u5c40\u4e2d\u5f15\u5165\u4e86\u4e00\u79cd\u65b0\u5355\u4f4d<code>fr<\/code>\uff0c\u5b83\u662ffraction\u8fd9\u4e2a\u5355\u8bcd\u7684\u7f29\u5199\uff0c\u610f\u601d\u662f\u5bb9\u5668\u5185\u5269\u4f59\u7a7a\u95f4\u7684\u5206\u6570\u6bd4\u3002\u8003\u8651\u4e0b\u9762\u8fd9\u4e2a\u4f8b\u5b50\uff1a<\/p>\n<pre><code class=\"hljs bash copyable\" lang=\"bash\">.parent {\r\n  height: 100px;\r\n  display: grid;\r\n  grid-template-columns: 100px 1fr 100px;\r\n}\r\n\r\n<span class=\"copy-code-btn\">\u6211\u4eec\u901a\u8fc7\u8bbe\u7f6e<code>100px 1fr 100px<\/code>\u7684\u5e03\u5c40\u6846\u67b6\uff0c\u4ece\u800c\u5f88\u8f7b\u677e\u5730\u5c31\u5b9e\u73b0\u4e86\u4e24\u8fb9\u5bbd\u5ea6\u56fa\u5b9a\uff0c\u4e2d\u95f4\u81ea\u9002\u5e94\u7684\u6548\u679c\u3002<\/span><\/code><\/pre>\n<p><img decoding=\"async\" class=\"lazyload inited loaded\" src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66f1a59283?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" alt=\"image.png\" data-src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66f1a59283?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" data-width=\"459\" data-height=\"97\" \/><\/p>\n<p>\u5982\u679c\u8981\u5b9e\u73b0\u6709\u6bd4\u4f8b\u5173\u7cfb\u7684\u5e03\u5c40\u7ed3\u6784\uff0c\u8fd8\u53ef\u4ee5\u4f7f\u7528\u591a\u4e2a<code>fr<\/code>\u7684\u53d6\u503c:<\/p>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-selector-class\"><span class=\"hljs-selector-class\">.parent<\/span> {\r\n  <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\"><span class=\"hljs-number\">400px<\/span>;\r\n  <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\"><span class=\"hljs-number\">100px<\/span>;\r\n  <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">display<\/span>: grid;\r\n  <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-template-rows<\/span>: <span class=\"hljs-number\"><span class=\"hljs-number\">100px<\/span> <span class=\"hljs-number\"><span class=\"hljs-number\">1<\/span>fr <span class=\"hljs-number\"><span class=\"hljs-number\">100px<\/span>;\r\n  <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-number\"><span class=\"hljs-number\">1<\/span>fr <span class=\"hljs-number\"><span class=\"hljs-number\">1<\/span>fr <span class=\"hljs-number\"><span class=\"hljs-number\">2<\/span>fr;\r\n  <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-template-areas<\/span>: <span class=\"hljs-string\"><span class=\"hljs-string\">\"a b c\"<\/span>\r\n}\r\n\r\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<p>\u53ef\u4ee5\u770b\u5230\u533a\u57dfa,b,c\u4e4b\u95f4\u7684\u6bd4\u4f8b\u5173\u7cfb\u5c31\u662f&#8221;1:1:2&#8243;\u7684\u5173\u7cfb\u3002<\/p>\n<p><img decoding=\"async\" class=\"lazyload inited loaded\" src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66aeacaaf1?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" alt=\"image.png\" data-src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66aeacaaf1?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" data-width=\"362\" data-height=\"96\" \/><\/p>\n<p>\u9664\u4e86\u4e0a\u8ff0\u8fd9\u4e2a\u652f\u6301\u81ea\u9002\u5e94\u7684\u5355\u4f4d\u5916\uff0c\u7f51\u683c\u5e03\u5c40\u4e2d\u8fd8\u80fd\u591f\u4f7f\u7528<code>max-content<\/code>\u548c<code>min-content<\/code>\u8fd9\u7ec4\u5173\u952e\u5b57\u6765\u8fbe\u5230\u81ea\u9002\u5e94\u7684\u76ee\u7684\u3002\u8981\u7406\u89e3\u8fd9\u4e24\u4e2a\u5173\u952e\u5b57\uff0c\u9996\u5148\u9700\u8981\u7406\u89e3\u5185\u5728\u5c3a\u5bf8(intrinsic size)\u548c\u5916\u90e8\u5c3a\u5bf8(extrinsic size)\u8fd9\u4e24\u4e2a\u6982\u5ff5\u3002\u5148\u8bf4\u4e00\u4e0b<code>extrinsic size<\/code>\uff0c\u5b83\u7684\u76f8\u5bf9\u503c\u8ba1\u7b97\u662f\u76f8\u5bf9\u4e8e\u7236\u5bb9\u5668\u5bf9\u5e94\u7684\u5c5e\u6027\u503c\u3002\u6211\u4eec\u77e5\u9053\uff0c<code>width<\/code>\u5982\u679c\u4f7f\u7528\u767e\u5206\u6bd4\u5355\u4f4d\uff0c\u5176\u8ba1\u7b97\u503c\u662f\u76f8\u5bf9\u4e8e\u8be5\u5143\u7d20\u6240\u5728\u7684\u5bb9\u5668\u5bbd\u5ea6\u7684\uff0c\u6bd4\u5982\u7236\u5bb9\u5668\u5bbd\u5ea6100px, \u5b50\u5143\u7d20\u8bbe\u7f6e<code>width: 20%<\/code>\uff0c\u90a3\u4e48\u5b83\u7684\u5bbd\u5ea6\u5c31\u662f<code>100px * 20% = 20px<\/code>\u3002\u5728css3\u4e2d\u5f15\u5165\u4e86<code>intrinsic size<\/code>\u5219\u662f\u76f8\u5bf9\u4e8e\u5143\u7d20\u81ea\u8eab\u5c3a\u5bf8\u8fdb\u884c\u8ba1\u7b97\u3002<code>max-content<\/code>\u548c<code>min-content<\/code>\u5c31\u662f\u76f8\u5bf9\u4e8e\u5143\u7d20\u81ea\u8eab\u5185\u5bb9\u5757\u8fdb\u884c\u8ba1\u7b97\u7684\u5c5e\u6027\u503c\u3002<\/p>\n<p><code>min-content<\/code>\u987e\u540d\u601d\u4e49\u662f\u6839\u636e\u5143\u7d20\u5185\u5bb9\u6765\u8bbe\u7f6e\u7684\u6700\u5c0f\u5bbd\u5ea6\u5927\u5c0f\uff0c\u5728\u82f1\u6587\u53e5\u5b50\u4e2d\uff0c\u901a\u5e38\u662f\u6700\u957f\u5355\u8bcd\u7684\u90a3\u4e2a\u957f\u5ea6\uff0c\u800c\u4e2d\u6587\u4e2d\u5219\u662f\u4e00\u4e2a\u5b57\u7684\u957f\u5ea6\u3002\u6bd4\u5982\u4e0b\u9762\u8fd9\u4e2a\u4f8b\u5b50\uff1a<\/p>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-selector-class\"><span class=\"hljs-selector-class\">.parent<\/span> {\r\n  <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">display<\/span>: grid;\r\n  <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-template-columns<\/span>: auto min-content auto;\r\n}\r\n\r\n<\/span><\/span><\/span><\/code><\/pre>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"lazyload inited loaded\" src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66b5112ebb?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" alt=\"image.png\" data-src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66b5112ebb?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" data-width=\"520\" data-height=\"112\" \/><\/p>\n<p>\u53ef\u4ee5\u770b\u5230\uff0c\u4e2d\u95f4\u90a3\u4e2a\u7f51\u683c\u7684\u90a3\u4e2a\u5bbd\u5ea6\u5c31\u7b49\u4e8e<code>scq000<\/code>\u8fd9\u4e2a\u5355\u8bcd\u7684\u957f\u5ea6\u3002<\/p>\n<p>\u4e0e<code>min-content<\/code>\u76f8\u5bf9\u5e94\uff0c<code>max-content<\/code>\u4f1a\u5c06\u5c3a\u5bf8\u8bbe\u7f6e\u6210\u5185\u5bb9\u5c3a\u5bf8\u80fd\u8fbe\u5230\u7684\u6700\u5927\u5bbd\u5ea6\u3002\u6211\u4eec\u628a\u4ee3\u7801\u6539\u6210\u4e0b\u9762\u8fd9\u6837:<\/p>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-selector-class\"><span class=\"hljs-selector-class\">.parent<\/span> {\r\n  <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">display<\/span>: grid;\r\n  <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-template-columns<\/span>: auto max-content auto;\r\n}\r\n\r\n<\/span><\/span><\/span><\/code><\/pre>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"lazyload inited loaded\" src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66b508d781?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" alt=\"image.png\" data-src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66b508d781?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" data-width=\"516\" data-height=\"37\" \/><\/p>\n<p>\u6709\u4e86\u8fd9\u4e24\u4e2a\u5c5e\u6027\u503c\uff0c\u6211\u4eec\u53ef\u4ee5\u5f88\u5bb9\u6613\u5730\u8ba9\u5e03\u5c40\u533a\u57df\u6839\u636e\u5185\u5bb9\u8fdb\u884c\u81ea\u9002\u5e94\u3002<\/p>\n<h2 class=\"heading\" data-id=\"heading-12\">\u51fd\u6570<\/h2>\n<p>\u51fd\u6570\u662f\u7528\u6765\u907f\u514d\u91cd\u590d\u6027\u5de5\u4f5c\u7684\u4e00\u79cd\u6709\u6548\u5de5\u5177\uff0c\u5728\u7f51\u683c\u5e03\u5c40\u4e2d\u63d0\u4f9b\u4e86\u4e00\u4e9b\u5e38\u7528CSS\u51fd\u6570\u6765\u65b9\u4fbf\u6211\u4eec\u7684\u5de5\u4f5c\u3002<\/p>\n<p>\u7b2c\u4e00\u4e2a\u8981\u4ecb\u7ecd\u7684\u662f<code>minmax<\/code>\u8fd9\u4e2a\u51fd\u6570\u3002\u5728\u8bbe\u7f6e\u7f51\u683c\u6846\u67b6\u7684\u8fc7\u7a0b\u4e2d\uff0c\u5bf9\u4e8e\u81ea\u9002\u5e94\u7684\u7f51\u683c\u533a\u57df\uff0c\u6211\u4eec\u90fd\u4f1a\u8bbe\u7f6e\u4e00\u4e2a\u6700\u5c0f\u503c\u548c\u6700\u5927\u503c\uff0c\u8fd9\u4e2a\u51fd\u6570\u5c31\u662f\u7528\u6765\u5b9e\u73b0\u8fd9\u4e2a\u76ee\u7684\u7684\u3002<\/p>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-selector-class\"><span class=\"hljs-selector-class\">.parent<\/span> {\r\n    <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">display<\/span>: grid;\r\n    <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-number\"><span class=\"hljs-number\">100px<\/span> <span class=\"hljs-built_in\"><span class=\"hljs-built_in\">minmax<\/span>(100px, 200px) <span class=\"hljs-number\"><span class=\"hljs-number\">100px<\/span>;\r\n}\r\n\r\n<span class=\"hljs-comment\"><span class=\"hljs-comment\">\/* \u6700\u5e38\u7528\u7684\u60c5\u51b5\u662f\u53ea\u8bbe\u7f6e\u6700\u5c0f\uff0c\u4e0d\u8bbe\u7f6e\u6700\u5927\u503c *\/<\/span>\r\n<span class=\"hljs-selector-class\"><span class=\"hljs-selector-class\">.parent<\/span> {\r\n    <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">display<\/span>: grid;\r\n    <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-number\"><span class=\"hljs-number\">100px<\/span> <span class=\"hljs-built_in\"><span class=\"hljs-built_in\">minmax<\/span>(100px, auto) <span class=\"hljs-number\"><span class=\"hljs-number\">100px<\/span>;\r\n}\r\n\r\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<p>\u5229\u7528\u8fd9\u4e2a\u51fd\u6570\u8bbe\u7f6e\u7684\u7f51\u683c\u5e03\u5c40\u53ef\u4ee5\u505a\u5230\u5f88\u597d\u7684\u81ea\u9002\u5e94\uff0c\u5728\u9875\u9762\u4f38\u7f29\u8fc7\u7a0b\u4e2d\u4e5f\u80fd\u4fdd\u8bc1\u5e03\u5c40\u7684\u7a33\u5b9a\u6027\u3002<\/p>\n<p>\u53e6\u4e00\u4e2a\u5f88\u6709\u7528\u7684\u51fd\u6570\u662f<code>fit-content<\/code>\uff0c\u5b83\u5b9e\u9645\u4e0a\u662f<code>min(maximum size, max(minimum size, argument))<\/code>\u7684\u7b80\u5199\uff0c\u8868\u793a\u5c06\u5143\u7d20\u5bbd\u5ea6\u6536\u7f29\u5230\u5185\u5bb9\u5bbd\u5ea6\u3002\u8bf4\u5f97\u901a\u4fd7\u70b9\u5c31\u662f\uff0c\u4f7f\u7528\u8fd9\u4e2a\u51fd\u6570\u540e\u4f1a\u5c3d\u91cf\u4e0d\u5360\u7528\u591a\u4f59\u7684\u7a7a\u95f4\u3002\u5982\u679c\u5185\u5bb9\u7684\u5bbd\u5ea6\u5c0f\u4e8e<code>fit-content<\/code>\u4e2d\u8bbe\u7f6e\u7684\u957f\u5ea6\uff0c\u90a3\u4e48\u5b9e\u9645\u5b50\u5143\u7d20\u5bbd\u5ea6\u662f\u5185\u5bb9\u5bbd\u5ea6\u3002\u5982\u679c\u5185\u5bb9\u5bbd\u5ea6\u8d85\u51fa\u4e86<code>fit-content<\/code>\u4e2d\u8bbe\u7f6e\u7684\u957f\u5ea6\uff0c\u90a3\u4e48\u5b9e\u9645\u5b50\u5143\u7d20\u5bbd\u5ea6\u5c31\u662f\u8bbe\u7f6e\u7684\u90a3\u4e2a\u957f\u5ea6\u3002\u4e0b\u9762\u770b\u4e24\u4e2a\u4f8b\u5b50:<\/p>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-selector-class\"><span class=\"hljs-selector-class\">.parent<\/span> {\r\n    <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">display<\/span>: grid;\r\n    <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-template-rows<\/span>: auto <span class=\"hljs-built_in\"><span class=\"hljs-built_in\">fit-content<\/span>(200px) auto;\r\n}\r\n\r\n<\/span><\/span><\/span><\/span><\/code><\/pre>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"lazyload inited loaded\" src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66b818b3dc?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" alt=\"image.png\" data-src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66b818b3dc?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" data-width=\"507\" data-height=\"63\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"lazyload inited loaded\" src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66ccfdcdd0?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" alt=\"image.png\" data-src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66ccfdcdd0?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" data-width=\"513\" data-height=\"32\" \/><\/p>\n<p>\u7b2c\u4e00\u4e2a\u53e5\u5b50\u4e2d\u7684\u957f\u5ea6\u8d85\u51fa\u4e86200px\uff0c\u90a3\u4e48\u6b64\u65f6\u4e2d\u95f4\u7f51\u683c\u7684\u5bbd\u5ea6\u662f200px\u3002\u800c\u7b2c\u4e8c\u4e2a\u4f8b\u5b50\u4e2d\u5185\u5bb9\u5bbd\u5ea6\u4e0d\u8db3200px\uff0c\u6b64\u65f6\u4e2d\u95f4\u7f51\u683c\u7684\u5bbd\u5ea6\u662f\u53e5\u5b50\u5b9e\u9645\u5360\u7528\u7684\u5bbd\u5ea6\u3002<\/p>\n<p>\u6700\u540e\u8981\u4ecb\u7ecd\u7684\u662f<code>repeat<\/code>\u51fd\u6570\uff0c\u5b83\u4e3b\u8981\u7528\u6765\u6279\u91cf\u8bbe\u7f6e\u6846\u67b6\u7684\u95f4\u8ddd\uff0c\u8fd9\u4e2a\u51fd\u6570\u63a5\u53d7\u4e24\u4e2a\u53c2\u6570\uff0c\u7b2c\u4e00\u4e2a\u53c2\u6570\u63a7\u5236\u5faa\u73af\u6b21\u6570\uff0c\u7b2c\u4e8c\u4e2a\u53c2\u6570\u63a7\u5236\u95f4\u8ddd\u5927\u5c0f\u3002\u8ba9\u6211\u4eec\u7528\u8fd9\u4e2a\u51fd\u6570\u6539\u5199\u4e00\u4e0b\u4e0a\u8ff0\u4f8b\u5b50:<\/p>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-selector-class\"><span class=\"hljs-selector-class\">.parent<\/span> {\r\n\t<span class=\"hljs-attribute\"><span class=\"hljs-attribute\">display<\/span>: grid;\r\n\t<span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-template-rows<\/span>: <span class=\"hljs-number\"><span class=\"hljs-number\">100px<\/span> <span class=\"hljs-number\"><span class=\"hljs-number\">100px<\/span> <span class=\"hljs-number\"><span class=\"hljs-number\">100px<\/span>;\r\n\t<span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-number\"><span class=\"hljs-number\">100px<\/span> <span class=\"hljs-number\"><span class=\"hljs-number\">100px<\/span> <span class=\"hljs-number\"><span class=\"hljs-number\">100px<\/span>;\r\n}\r\n<span class=\"hljs-comment\"><span class=\"hljs-comment\">\/* \u5229\u7528repeat\u51fd\u6570\u6539\u5199 *\/<\/span>\r\n<span class=\"hljs-selector-class\"><span class=\"hljs-selector-class\">.parent<\/span> {\r\n\t<span class=\"hljs-attribute\"><span class=\"hljs-attribute\">display<\/span>: grid;\r\n\t<span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-template-rows<\/span>: <span class=\"hljs-built_in\"><span class=\"hljs-built_in\">repeat<\/span>(3, 100px);\r\n\t<span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-built_in\"><span class=\"hljs-built_in\">repeat<\/span>(3, 100px);\r\n}\r\n\r\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<p>\u53e6\u5916\uff0c\u7b2c\u4e00\u4e2a\u53c2\u6570\u9664\u4e86\u53ef\u4ee5\u4f7f\u7528\u6570\u5b57\u663e\u793a\u8bbe\u7f6e\u7f51\u683c\u6570\u91cf\u5916\uff0c\u8fd8\u80fd\u4f7f\u7528<code>auto-fit<\/code>\u548c<code>auto-fill<\/code>\u4e24\u4e2a\u5173\u952e\u5b57\u81ea\u52a8\u5206\u914d\u7a7a\u95f4\u3002\u901a\u5e38\u60c5\u51b5\u4e0b\uff0c\u8fd9\u4e24\u4e2a\u5173\u952e\u5b57\u7684\u4f7f\u7528\u6548\u679c\u90fd\u5dee\u4e0d\u591a\uff0c\u552f\u4e00\u7684\u5dee\u522b\u662f\u7a7a\u4f59\u7a7a\u95f4\u7684\u5206\u914d\u89c4\u5219\u3002\u642d\u914d<code>minmax<\/code>\u51fd\u6570\u53ef\u4ee5\u770b\u51fa\u533a\u522b\uff0c\u5982\u4e0b\u9762\u8fd9\u4e24\u4e2a\u4f8b\u5b50\uff1a<\/p>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-selector-class\"><span class=\"hljs-selector-class\">.parent<\/span> {\r\n\t<span class=\"hljs-attribute\"><span class=\"hljs-attribute\">display<\/span>: grid;\r\n\t<span class=\"hljs-attribute\"><span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\"><span class=\"hljs-number\">500px<\/span>;\r\n\t<span class=\"hljs-attribute\"><span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\"><span class=\"hljs-number\">100px<\/span>;\r\n\t<span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-gap<\/span>: <span class=\"hljs-number\"><span class=\"hljs-number\">10px<\/span>;\r\n\t<span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-built_in\"><span class=\"hljs-built_in\">repeat<\/span>(auto-fit, minmax(100px, 1fr));\r\n}\r\n\r\n<span class=\"hljs-selector-class\"><span class=\"hljs-selector-class\">.parent<\/span> {\r\n\t<span class=\"hljs-attribute\"><span class=\"hljs-attribute\">display<\/span>: grid;\r\n\t<span class=\"hljs-attribute\"><span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\"><span class=\"hljs-number\">500px<\/span>;\r\n\t<span class=\"hljs-attribute\"><span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\"><span class=\"hljs-number\">100px<\/span>;\r\n\t<span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-gap<\/span>: <span class=\"hljs-number\"><span class=\"hljs-number\">10px<\/span>;\r\n\t<span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-built_in\"><span class=\"hljs-built_in\">repeat<\/span>(auto-fill, minmax(100px, 1fr));\r\n}\r\n<span class=\"copy-code-btn\">\u00a0<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<p><img decoding=\"async\" class=\"lazyload inited loaded\" src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66d5c08a0b?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" alt=\"auto-fit\" data-src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66d5c08a0b?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" data-width=\"520\" data-height=\"124\" \/><\/p>\n<p>&nbsp;<\/p>\n<p><img decoding=\"async\" class=\"lazyload inited loaded\" src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66d9fd15a1?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" alt=\"image.png\" data-src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66d9fd15a1?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" data-width=\"515\" data-height=\"113\" \/><\/p>\n<p>\u5728\u5355\u884c\u5e03\u5c40\u7684\u65f6\u5019\uff0c\u5982\u679c\u6709\u7a7a\u4f59\u7a7a\u95f4<code>auto-fit<\/code>\u4f1a\u5c06\u5b83\u4eec\u5e73\u5747\u5206\u914d\u5230\u6240\u6709\u5b50\u5143\u7d20\u4e2d\uff0c\u800c<code>auto-fill<\/code>\u4f1a\u81ea\u52a8\u521b\u5efa\u7a7a\u767d\u7684\u5217\u3002<\/p>\n<h2 class=\"heading\" data-id=\"heading-13\">\u547d\u540d<\/h2>\n<p>\u6211\u4eec\u5728\u521b\u5efa\u7f51\u683c\u5e03\u5c40\u6846\u67b6\u7684\u65f6\u5019\uff0c\u901a\u8fc7&#8221;\u753b\u7ebf&#8221;\u6765\u6307\u5b9a\u57fa\u672c\u5e03\u5c40\u7ed3\u6784\u3002\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u7f51\u683c\u5e03\u5c40\u4f1a\u7ed9\u6bcf\u4e00\u6761\u7f51\u683c\u7ebf\u8fdb\u884c\u547d\u540d\uff0c\u547d\u540d\u987a\u5e8f\u540c\u4e66\u5199\u987a\u5e8f\u4e00\u81f4:\u4ece\u5de6\u5230\u53f3\uff0c\u7531\u4e0a\u81f3\u4e0b\u6309\u6570\u5b57\u547d\u540d\u3002\u5047\u8bbe\u6211\u4eec\u6307\u5b9a\u7684\u662f3&#215;3\u7684\u7f51\u683c\u5e03\u5c40\u7ed3\u6784\uff0c\u90a3\u4e48\u5305\u542b\u8fb9\u6846\u7ebf\uff0c\u5c31\u4f1a\u751f\u62104+4=8\u6761\u7ebf\u3002<\/p>\n<p><img decoding=\"async\" class=\"lazyload inited loaded\" src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a665e1be7d8?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" alt=\"image.png\" data-src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a665e1be7d8?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" data-width=\"341\" data-height=\"330\" \/><\/p>\n<\/div>\n<div class=\"article-content\" data-v-4f8894a8=\"\" data-id=\"5d2e52dc6fb9a07ec42b8e6d\">\n<p>\u9664\u4e86\u91c7\u7528\u9ed8\u8ba4\u547d\u540d\u65b9\u5f0f\uff0c\u6211\u4eec\u8fd8\u80fd\u591f\u81ea\u5b9a\u4e49\u7f51\u683c\u7ebf\u7684\u540d\u79f0\u4ee5\u4fbf\u4e8e\u540e\u7eed\u5728\u5b50\u5143\u7d20\u5b9a\u4f4d\u4e2d\u4f7f\u7528\u3002<\/p>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-selector-class\"><span class=\"hljs-selector-class\">.parent<\/span> {\r\n  <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">display<\/span>: grid;\r\n  <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-template-rows<\/span>: [row-a] <span class=\"hljs-number\"><span class=\"hljs-number\">100px<\/span> [row-b] <span class=\"hljs-number\"><span class=\"hljs-number\">100px<\/span> [row-c] <span class=\"hljs-number\"><span class=\"hljs-number\">100px<\/span> [row-d];\r\n}\r\n\r\n<\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<h2 class=\"heading\" data-id=\"heading-14\">\u5bf9\u9f50<\/h2>\n<p>\u5bf9\u9f50\u662f\u5e03\u5c40\u8fc7\u7a0b\u4e2d\u4e00\u4e2a\u4e0d\u53ef\u7f3a\u5c11\u7684\u6b65\u9aa4\uff0c\u5b83\u7684\u53d6\u503c\u662f\u901a\u8fc7\u5df2\u6709\u7684\u5173\u952e\u5b57\u6765\u6307\u5b9a\u7684\u3002\u5176\u4e2d\u7528\u4e8e\u7f51\u683c\u5e03\u5c40\u4e2d\u5bf9\u9f50\u7684\u5173\u952e\u5b57\u6709<code>start<\/code>,<code>center<\/code>,\u00a0<code>end<\/code>\u548c<code>stretch<\/code>\u56db\u4e2a\u3002 \u6211\u4eec\u5148\u4ece\u9ed8\u8ba4\u503c<code>stretch<\/code>\u770b\u8d77\uff0c\u8fd9\u4e2a\u5173\u952e\u5b57\u662f\u4f38\u5c55\u7684\u610f\u601d\uff0c\u6240\u4ee5\u5728\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u7f51\u683c\u4e2d\u7684\u5b50\u5143\u7d20\u4f1a\u5c3d\u53ef\u80fd\u5730\u586b\u5145\u6ee1\u7f51\u683c\u533a\u57df\uff0c\u7531\u4e8e\u662f\u9ed8\u8ba4\u503c\u6240\u4ee5\u5e73\u5e38\u5199\u4ee3\u7801\u7684\u65f6\u5019\u5c31\u4e0d\u592a\u4f1a\u53ef\u4ee5\u53bb\u7528\u8fd9\u4e2a\u5173\u952e\u5b57\u8fdb\u884c\u58f0\u660e\u3002 \u63a5\u7740\u518d\u6765\u770b\u4e00\u4e0b\u5e38\u7528\u7684\u5bf9\u9f50\u53d6\u503c\u7b56\u7565\uff0c\u53ea\u9700\u8981\u8bb0\u4f4f\u4e00\u70b9\u5c31\u53ef\u4ee5\u4e86\uff1a\u7528\u5c5e\u6027<code>justify-*<\/code>,<code>align-*<\/code>\u6765\u5206\u522b\u63a7\u5236\u6a2a\u8f74\u548c\u7eb5\u8f74\u4e24\u4e2a\u65b9\u5411\uff0c\u5c5e\u6027\u503c\u63a7\u5236\u5176\u5bf9\u9f50\u4f4d\u7f6e\u3002\u00a0<code>start<\/code>\uff0c<code>center<\/code>\u548c<code>end<\/code>\u4e09\u4e2a\u5c5e\u6027\u503c\u5c31\u5206\u522b\u5bf9\u5e94\u4e86<code>\u524d\u4e2d\u540e<\/code>\u4e09\u4e2a\u4f4d\u7f6e\u3002<\/p>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-selector-class\"><span class=\"hljs-selector-class\">.parent<\/span> {\r\n  <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">display<\/span>: grid;\r\n}\r\n<span class=\"hljs-selector-class\"><span class=\"hljs-selector-class\">.child<\/span><span class=\"hljs-selector-pseudo\"><span class=\"hljs-selector-pseudo\">:first-child<\/span> {\r\n  <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">justify-self<\/span>: start;\r\n}\r\n<span class=\"hljs-selector-class\"><span class=\"hljs-selector-class\">.child<\/span><span class=\"hljs-selector-pseudo\"><span class=\"hljs-selector-pseudo\">:first-child<\/span> {\r\n  <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">justify-self<\/span>: center;\r\n}\r\n<span class=\"hljs-selector-class\"><span class=\"hljs-selector-class\">.child<\/span><span class=\"hljs-selector-pseudo\"><span class=\"hljs-selector-pseudo\">:first-child<\/span> {\r\n  <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">justify-self<\/span>: end;\r\n}\r\n\r\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<h2 class=\"heading\" data-id=\"heading-15\"><em>*\u6392\u5217<\/em><\/h2>\n<p>\u8ba9\u6211\u4eec\u91cd\u65b0\u56de\u5230\u9690\u5f0f\u7f51\u683c\u90a3\u90e8\u5206,\u9690\u5f0f\u7684\u6392\u5217\u89c4\u5219\u662f\u901a\u8fc7\u6307\u5b9a<code>grid-auto-flow<\/code>\u8fd9\u4e2a\u5c5e\u6027\u6765\u8bbe\u7f6e\u7684\u3002\u5b83\u7684\u53d6\u503c\u53ea\u6709\u4e09\u4e2a<code>row<\/code>\uff0c<code>column<\/code>\u548c<code>dense<\/code>\u3002\u4e0a\u9762\u5c5e\u6027\u90e8\u5206\u5df2\u7ecf\u4ecb\u7ecd\u8fc7<code>row<\/code>\u548c<code>column<\/code>\u4e24\u4e2a\u5c5e\u6027\u503c\uff0c\u524d\u8005\u662f\u6309\u884c\u4f18\u5148\u6765\u6446\u653e\u5b50\u5143\u7d20\uff0c\u540e\u8005\u662f\u6309\u5217\u4f18\u5148\u6765\u6446\u653e\u5b50\u5143\u7d20\u3002\u8fd9\u91cc\u4e3b\u8981\u4ecb\u7ecd\u4e00\u4e0b<code>dense<\/code>\u8fd9\u4e2a\u5c5e\u6027\u503c\u3002\u901a\u5e38\u60c5\u51b5\u4e0b\uff0c\u6392\u5217\u5b50\u5143\u7d20\u4f1a\u6309\u7167\u987a\u5e8f\u586b\u5145\u884c\u6216\u5217\uff0c\u5982\u679c\u7a7a\u95f4\u4e0d\u8db3\u7684\u65f6\u5019\uff0c\u4f1a\u6362\u884c\u6216\u6362\u5217\u3002\u800c\u4f7f\u7528\u4e86<code>dense<\/code>\u5c5e\u6027\u540e\uff0c\u4f1a\u5c3d\u91cf\u4f7f\u7528\u7a7a\u4f59\u7a7a\u95f4\uff0c\u8003\u8651\u4e0b\u9762\u8fd9\u6bb5\u4ee3\u7801\uff1a<\/p>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-selector-class\"><span class=\"hljs-selector-class\">.parent<\/span> {\r\n  <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">display<\/span>: grid;\r\n  <span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-built_in\"><span class=\"hljs-built_in\">repeat<\/span>(3, 100px);\r\n}\r\n\r\n<\/span><\/span><\/span><\/span><\/code><\/pre>\n<pre><code class=\"hljs html copyable xml\" lang=\"html\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">&lt;<\/span><span class=\"hljs-name\"><span class=\"hljs-tag\"><span class=\"hljs-name\">div<\/span> <\/span><span class=\"hljs-attr\"><span class=\"hljs-tag\"><span class=\"hljs-attr\">class<\/span>=<\/span><span class=\"hljs-string\"><span class=\"hljs-tag\"><span class=\"hljs-string\">\"parent\"<\/span>&gt;<\/span>\r\n  <span class=\"hljs-tag\"><span class=\"hljs-tag\">&lt;<\/span><span class=\"hljs-name\"><span class=\"hljs-tag\"><span class=\"hljs-name\">div<\/span> <\/span><span class=\"hljs-attr\"><span class=\"hljs-tag\"><span class=\"hljs-attr\">class<\/span>=<\/span><span class=\"hljs-string\"><span class=\"hljs-tag\"><span class=\"hljs-string\">\"child\"<\/span>&gt;<\/span>1<span class=\"hljs-tag\"><span class=\"hljs-tag\">&lt;\/<\/span><span class=\"hljs-name\"><span class=\"hljs-tag\"><span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n  <span class=\"hljs-tag\"><span class=\"hljs-tag\">&lt;<\/span><span class=\"hljs-name\"><span class=\"hljs-tag\"><span class=\"hljs-name\">div<\/span> <\/span><span class=\"hljs-attr\"><span class=\"hljs-tag\"><span class=\"hljs-attr\">class<\/span>=<\/span><span class=\"hljs-string\"><span class=\"hljs-tag\"><span class=\"hljs-string\">\"child\"<\/span>&gt;<\/span>2<span class=\"hljs-tag\"><span class=\"hljs-tag\">&lt;\/<\/span><span class=\"hljs-name\"><span class=\"hljs-tag\"><span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n  <span class=\"hljs-tag\"><span class=\"hljs-tag\">&lt;<\/span><span class=\"hljs-name\"><span class=\"hljs-tag\"><span class=\"hljs-name\">div<\/span> <\/span><span class=\"hljs-attr\"><span class=\"hljs-tag\"><span class=\"hljs-attr\">class<\/span>=<\/span><span class=\"hljs-string\"><span class=\"hljs-tag\"><span class=\"hljs-string\">\"child\"<\/span>&gt;<\/span>3<span class=\"hljs-tag\"><span class=\"hljs-tag\">&lt;\/<\/span><span class=\"hljs-name\"><span class=\"hljs-tag\"><span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n  <span class=\"hljs-tag\"><span class=\"hljs-tag\">&lt;<\/span><span class=\"hljs-name\"><span class=\"hljs-tag\"><span class=\"hljs-name\">div<\/span> <\/span><span class=\"hljs-attr\"><span class=\"hljs-tag\"><span class=\"hljs-attr\">class<\/span>=<\/span><span class=\"hljs-string\"><span class=\"hljs-tag\"><span class=\"hljs-string\">\"child\"<\/span>&gt;<\/span>4<span class=\"hljs-tag\"><span class=\"hljs-tag\">&lt;\/<\/span><span class=\"hljs-name\"><span class=\"hljs-tag\"><span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n  <span class=\"hljs-tag\"><span class=\"hljs-tag\">&lt;<\/span><span class=\"hljs-name\"><span class=\"hljs-tag\"><span class=\"hljs-name\">div<\/span> <\/span><span class=\"hljs-attr\"><span class=\"hljs-tag\"><span class=\"hljs-attr\">class<\/span>=<\/span><span class=\"hljs-string\"><span class=\"hljs-tag\"><span class=\"hljs-string\">\"child\"<\/span>&gt;<\/span>5<span class=\"hljs-tag\"><span class=\"hljs-tag\">&lt;\/<\/span><span class=\"hljs-name\"><span class=\"hljs-tag\"><span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\"><span class=\"hljs-tag\">&lt;\/<\/span><span class=\"hljs-name\"><span class=\"hljs-tag\"><span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n\r\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<p>\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u663e\u793a\u6548\u679c\u662f\u8fd9\u6837\u7684:<\/p>\n<p><img decoding=\"async\" class=\"lazyload inited loaded\" src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66dd414ab6?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" alt=\"image.png\" data-src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66dd414ab6?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" data-width=\"274\" data-height=\"442\" \/><\/p>\n<p>\u5f53\u6211\u4eec\u4f7f\u7528<code>dense<\/code>\u503c\u8fdb\u884c\u6392\u5217\u7684\u65f6\u5019\uff0c\u5c31\u76f8\u5f53\u4e8e\u5f00\u542f\u201c\u7d27\u51d1\u201d\u6a21\u5f0f\uff0c\u4f1a\u5c3d\u53ef\u80fd\u5229\u7528\u7a7a\u4f59\u7a7a\u95f4\u3002<\/p>\n<pre><code class=\"hljs css copyable\" lang=\"css\"><span class=\"hljs-selector-class\"><span class=\"hljs-selector-class\">.parent<\/span> {\r\n\t<span class=\"hljs-attribute\"><span class=\"hljs-attribute\">display<\/span>: grid;\r\n\t<span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-auto-flow<\/span>: row dense;\r\n\t<span class=\"hljs-comment\"><span class=\"hljs-comment\">\/* \u7531\u4e8e\u9ed8\u8ba4\u4e3a\u6309\u884c\u6392\u5217\uff0c\u53ef\u7701\u7565\u4e3adense *\/<\/span>\r\n\t<span class=\"hljs-attribute\"><span class=\"hljs-attribute\">grid-auto-flow<\/span>: dense;\r\n}\r\n\r\n<\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<p>\u6240\u4ee5\uff0c\u663e\u793a\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<p><img decoding=\"async\" class=\"lazyload inited loaded\" src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66dd8ce1b2?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" alt=\"image.png\" data-src=\"https:\/\/user-gold-cdn.xitu.io\/2019\/7\/16\/16bf9a66dd8ce1b2?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" data-width=\"273\" data-height=\"442\" \/><\/p>\n<h1 class=\"heading\" data-id=\"heading-16\">\u603b\u7ed3<\/h1>\n<p>\u5728\u8fd9\u7bc7\u6587\u7ae0\u91cc\uff0c\u6211\u901a\u8fc7\u62c6\u89e3\u5206\u7c7b\u6240\u6709\u7f51\u683c\u5e03\u5c40\u76f8\u5173\u7684\u77e5\u8bc6\u70b9\uff0c\u5e0c\u671b\u80fd\u591f\u4e3a\u5927\u5bb6\u63d0\u4f9b\u4e00\u4e2a\u6bd4\u8f83\u7cfb\u7edf\u7684\u8fd0\u7528\u7f51\u683c\u5e03\u5c40\u7684\u6307\u5bfc\u65b9\u6cd5\u3002\u5728\u5b9e\u9645\u5e94\u7528\u8fc7\u7a0b\u4e2d\uff0c\u6cbf\u7740&#8221;32\u6784\u5efa\u4e4b\u6cd5\u201d\u7684\u8fd9\u4e2a\u5957\u8def\u6765\u8d70\uff0c\u53ef\u4ee5\u8282\u7ea6\u5f88\u591a\u601d\u8003\u548c\u51b3\u7b56\u65f6\u95f4\u3002\u53e6\u5916\uff0c\u7531\u4e8e\u8fd9\u7bc7\u6587\u7ae0\u4fe1\u606f\u5bc6\u5ea6\u53ef\u80fd\u6bd4\u8f83\u5927\uff0c\u5e0c\u671b\u5927\u5bb6\u80fd\u591f\u591a\u591a\u590d\u4e60\uff0c\u5e76\u8ddf\u7740\u4f8b\u5b50\u5b9e\u9645\u64cd\u7ec3\u51e0\u904d\uff0c\u8fd9\u6837\u5728\u5b9e\u9645\u5de5\u4f5c\u8fd0\u7528\u4e2d\u624d\u80fd\u5982\u9c7c\u5f97\u6c34\u3002\u6700\u540e\uff0c\u9001\u4e0a\u4e00\u5f20\u601d\u7ef4\u5bfc\u56fe\uff0c\u5e2e\u52a9\u5927\u5bb6\u80fd\u591f\u4e00\u89c8\u672c\u6587\u6240\u6709\u7684\u91cd\u70b9\u3002<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/05\/grid\u5b66\u4e60.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-2956\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2020\/05\/grid\u5b66\u4e60.png\" alt=\"grid\u5b66\u4e60\" width=\"1239\" height=\"737\" \/><\/a><\/p>\n<\/div>\n<div class=\"article-content\" data-v-4f8894a8=\"\" data-id=\"5d2e52dc6fb9a07ec42b8e6d\">\u00a0\u539f\u6587:<a href=\"https:\/\/www.cnblogs.com\/scq000\/p\/11206692.html\">https:\/\/www.cnblogs.com\/scq000\/p\/11206692.html<\/a><\/div>\n<div class=\"article-content\" data-v-4f8894a8=\"\" data-id=\"5d2e52dc6fb9a07ec42b8e6d\"><\/div>\n<div class=\"article-content\" data-v-4f8894a8=\"\" data-id=\"5d2e52dc6fb9a07ec42b8e6d\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u51e0\u4e4e\u4ece\u6211\u4eec\u8e0f\u5165\u524d\u7aef\u5f00\u53d1\u8fd9\u4e2a\u9886\u57df\u5f00\u59cb\uff0c\u5c31\u4e0d\u505c\u5730\u63a5\u89e6\u4e0d\u540c\u7684\u5e03\u5c40\u6280\u672f\u3002\u4ece\u5e38\u89c1\u7684\u6d6e\u52a8\u5230\u8868\u683c\u5e03\u5c40\uff0c\u518d\u5230\u5982\u4eca\u5927\u884c\u5176\u9053\u7684fl [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[109,105],"tags":[134],"_links":{"self":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2955"}],"collection":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2955"}],"version-history":[{"count":2,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2955\/revisions"}],"predecessor-version":[{"id":2959,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/2955\/revisions\/2959"}],"wp:attachment":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}