{"id":8144,"date":"2018-11-06T00:59:37","date_gmt":"2018-11-05T16:59:37","guid":{"rendered":"https:\/\/www.zhangxinxu.com\/wordpress\/?p=8144"},"modified":"2025-04-03T11:18:49","modified_gmt":"2025-04-03T03:18:49","slug":"display-grid-css-css3","status":"publish","type":"post","link":"https:\/\/www.zhangxinxu.com\/wordpress\/2018\/11\/display-grid-css-css3\/","title":{"rendered":"\u5199\u7ed9\u81ea\u5df1\u770b\u7684display: grid\u5e03\u5c40\u6559\u7a0b"},"content":{"rendered":"<p>by <a href=\"https:\/\/www.zhangxinxu.com\/\">zhangxinxu<\/a> from <a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=8144\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=8144<\/a><br \/>\n\u672c\u6587\u53ef\u5168\u6587\u8f6c\u8f7d\uff0c\u4e2a\u4eba\u7f51\u7ad9\u65e0\u9700\u6388\u6743\uff0c\u53ea\u8981\u4fdd\u7559\u539f\u4f5c\u8005\u3001\u51fa\u5904\u4ee5\u53ca\u6587\u4e2d\u94fe\u63a5\u5373\u53ef\uff0c\u4efb\u4f55\u7f51\u7ad9\u5747\u53ef\u6458\u8981\u805a\u5408\uff0c\u5546\u7528\u8bf7\u8054\u7cfb\u6388\u6743\u3002<\/p>\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"\/sp\/lulu\/theme\/peak\/css\/common\/ui\/Radio.css\">\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"\/study\/201810\/grid.css\">\n<h3>\u4e00\u3001\u524d\u8a00&amp;\u7d22\u5f15<\/h3>\n<p>\u7ed9<code>&lt;div&gt;<\/code>\u8fd9\u7c7b\u5757\u72b6\u5143\u7d20\u5143\u7d20\u8bbe\u7f6e<code>display:grid<\/code>\u6216\u8005\u7ed9<code>&lt;span&gt;<\/code>\u8fd9\u7c7b\u5185\u8054\u5143\u7d20\u8bbe\u7f6e<code>display:inline-grid<\/code>\uff0cGrid\u5e03\u5c40\u5373\u521b\u5efa\uff01\u4f8b\u5982\uff1a<\/p>\n<pre>div {\r\n    display: grid;\r\n}<\/pre>\n<p>\u6b64\u65f6\u8be5div\u5c31\u662f\u201cgrid\u5bb9\u5668\u201d\uff0c\u5176\u5b50\u5143\u7d20\u79f0\u4e3a\u201cgrid\u5b50\u9879\u201d\u3002<\/p>\n<p><span class=\"s\">\/\/zxx: grid\u548cinline-grid\u533a\u522b\u5728\u4e8e\uff0cinline-grid\u5bb9\u5668\u4e3ainline\u7279\u6027\uff0c\u56e0\u6b64\u53ef\u4ee5\u548c\u56fe\u7247\u6587\u5b57\u4e00\u884c\u663e\u793a\uff1bgrid\u5bb9\u5668\u4fdd\u6301\u5757\u72b6\u7279\u6027\uff0c\u5bbd\u5ea6\u9ed8\u8ba4100%\uff0c\u4e0d\u548c\u5185\u8054\u5143\u7d20\u4e00\u884c\u663e\u793a\u3002<\/span><\/p>\n<p>\u5728Grid\u5e03\u5c40\u4e2d\uff0c\u6240\u6709\u76f8\u5173CSS\u5c5e\u6027\u6b63\u597d\u5206\u4e3a\u4e24\u62e8\uff0c\u4e00\u62e8\u4f5c\u7528\u5728grid\u5bb9\u5668\u4e0a\uff0c\u8fd8\u6709\u4e00\u62e8\u4f5c\u7528\u5728grid\u5b50\u9879\u4e0a\u3002\u5177\u4f53\u53c2\u89c1\u4e0b\u8868\uff0c\u70b9\u51fb\u53ef\u5feb\u901f\u7d22\u5f15\u3002<\/p>\n<table border=\"0\" width=\"100%\" class=\"params_table\" cellspacing=\"1\" style=\"max-width:400px;\">\n<thead>\n<tr>\n<th>\u4f5c\u7528\u5728grid\u5bb9\u5668\u4e0a<\/th>\n<th>\u4f5c\u7528\u5728grid\u5b50\u9879\u4e0a<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td style=\"vertical-align: top;\">\n<ul>\n<li><a href=\"#grid-template-columns-rows\" title=\"\">grid-template-columns<\/a><\/li>\n<li><a href=\"#grid-template-columns-rows\" title=\"\">grid-template-rows<\/a><\/li>\n<li><a href=\"#grid-template-areas\" title=\"\">grid-template-areas<\/a><\/li>\n<li><a href=\"#grid-template\" title=\"\">grid-template<\/a><\/li>\n<li><a href=\"#grid-column-row-gap\" title=\"\">grid-column-gap<\/a><\/li>\n<li><a href=\"#grid-column-row-gap\" title=\"\">grid-row-gap<\/a><\/li>\n<li><a href=\"#grid-gap\" title=\"\">grid-gap<\/a><\/li>\n<li><a href=\"#justify-items\" title=\"\">justify-items<\/a><\/li>\n<li><a href=\"#align-items\" title=\"\">align-items<\/a><\/li>\n<li><a href=\"#place-items\" title=\"\">place-items<\/a><\/li>\n<li><a href=\"#justify-content\" title=\"\">justify-content<\/a><\/li>\n<li><a href=\"#align-content\" title=\"\">align-content<\/a><\/li>\n<li><a href=\"#place-content\" title=\"\">place-content<\/a><\/li>\n<li><a href=\"#grid-auto-columns-rows\" title=\"\">grid-auto-columns<\/a><\/li>\n<li><a href=\"#grid-auto-columns-rows\" title=\"\">grid-auto-rows<\/a><\/li>\n<li><a href=\"#grid-auto-flow\" title=\"\">grid-auto-flow<\/a><\/li>\n<li><a href=\"#grid-grid\" title=\"\">grid<\/a><\/li>\n<\/ul>\n<\/td>\n<td style=\"vertical-align: top;\">\n<ul>\n<li><a href=\"#grid-column-row-se\" title=\"\">grid-column-start<\/a><\/li>\n<li><a href=\"#grid-column-row-se\" title=\"\">grid-column-end<\/a><\/li>\n<li><a href=\"#grid-column-row-se\" title=\"\">grid-row-start<\/a><\/li>\n<li><a href=\"#grid-column-row-se\" title=\"\">grid-row-end<\/a><\/li>\n<li><a href=\"#grid-column-row\" title=\"\">grid-column<\/a><\/li>\n<li><a href=\"#grid-column-row\" title=\"\">grid-row<\/a><\/li>\n<li><a href=\"#grid-area\" title=\"\">grid-area<\/a><\/li>\n<li><a href=\"#justify-self\" title=\"\">justify-self<\/a><\/li>\n<li><a href=\"#align-self\" title=\"\">align-self<\/a><\/li>\n<li><a href=\"#place-self\" title=\"\">place-self<\/a><\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Grid\u5e03\u5c40\u76f8\u5173CSS\u5c5e\u6027\u867d\u7136\u5f88\u591a\uff0c\u4f46\u662f\u5b9e\u9645\u4e0a\u90fd\u4e0d\u96be\u7406\u89e3\uff0c\u96be\u7684\u662f\u8fd9\u4e9b\u5c5e\u6027\u4e0d\u592a\u5bb9\u6613\u8bb0\u4f4f\uff0c\u9700\u8981\u591a\u591a\u5b9e\u6218\u624b\u5199\u624d\u80fd\u4fe1\u624b\u62c8\u6765\u3002<\/p>\n<p>Grid\u5e03\u5c40\u662f\u4e00\u4e2a\u4e8c\u7ef4\u7684\u5e03\u5c40\u65b9\u6cd5\uff0c\u7eb5\u6a2a\u4e24\u4e2a\u65b9\u5411\u603b\u662f\u540c\u65f6\u5b58\u5728\u3002\u5176\u4e2d\u7684\u5f88\u591a\u5e03\u5c40\u6982\u5ff5\u8ddf\u4e2d\u56fd\u519c\u7530\u7684\u5e03\u5c40\u662f\u5b8c\u5168\u5339\u914d\u7684\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201811\/nonghtian.jpg\" width=\"320\" height=\"240\" alt=\"\u7530\u5730\"><\/p>\n<p>\u56e0\u6b64\uff0c\u5728\u6211\u770b\u6765\uff0cGrid\u5e03\u5c40\u5c31\u50cf\u662f\u201c\u5206\u7530\u79cd\u5730\u201d\u3002\u6545\u4e8b\u662f\u8fd9\u6837\u7684\uff0c\u5f20\u8001\u677f\u662f\u4e2a\u7a0b\u5e8f\u5458\uff0c\u7701\u5403\u4fed\u7528\u6512\u4e86\u70b9\u5c0f\u94b1\uff0c\u7136\u540e\u8001\u5bb6\u56e0\u4e3a\u57ce\u9547\u5316\u5efa\u8bbe\uff0c\u519c\u6751\u90fd\u6ca1\u4ec0\u4e48\u4eba\uff0c\u571f\u5730\u90fd\u8352\u5e9f\u5728\u90a3\u91cc\uff0c\u4e8e\u662f\u5c31\u627f\u5305\u4e86\u4e00\u5757\u5730\uff0c\u6253\u7b97\u517b\u517b\u9c7c\uff0c\u79cd\u79cd\u679c\u6811\u3002\u627f\u5305\u7684\u5730\u65b9\u5f88\u633a\u5927\uff0c\u5982\u4f55\u5212\u5206\u571f\u5730\u5c31\u6210\u4e86\u95ee\u9898\uff0c\u4e8e\u662f\u5f20\u8001\u677f\u6253\u7b97\u501f\u52a9Grid\u5e03\u5c40\u6765\u5212\u5206\u3002<\/p>\n<h3>\u4e8c\u3001\u4f5c\u7528\u5728grid\u5bb9\u5668\u4e0a\u7684CSS\u5c5e\u6027<\/h3>\n<h4 id=\"grid-template-columns-rows\">1. grid-template-columns\u548cgrid-template-rows<\/h4>\n<p>\u8fd9\u4e24\u4e2aCSS\u5c5e\u6027\u7528\u6765\u5bf9\u7530\u5730\u8fdb\u884c\u57fa\u672c\u7684\u5212\u5206\uff0ccolumns\u662f\u5217\u7684\u610f\u601d\uff0c\u8868\u793a\u7ad6\u76f4\u65b9\u5411\u7684\u5212\u5206\uff1brows\u662f\u884c\u7684\u610f\u601d\uff0c\u8868\u793a\u6c34\u5e73\u65b9\u5411\u7684\u5212\u5206\u3002\u73b0\u5b9e\u4e16\u754c\u4e2d\uff0c\u519c\u7530\u7684\u5e03\u5c40\u6784\u9020\u4e00\u822c\u4e0b\u9762\u4e24\u79cd\uff1a<\/p>\n<ol>\n<li>\u7530\u5730A-\u7530\u5730B\uff0c\u4e0b\u9762\u662f\u571f\u5730C-\u571f\u5730D\uff0c\u5c31\u662f\u201c\u7530\u201d\u8fd9\u4e2a\u5b57\u7684\u6784\u9020\uff0c\u53ea\u4e0d\u8fc74\u5757\u5730\u4e4b\u95f4\u5206\u9694\u5c31\u662f\u4e2a\u4e0d\u80fd\u8d70\u8def\u7684\u5c0f\u6c9f\u6c9f\uff0c\u5bbd\u5ea6\u53ef\u4ee5\u5ffd\u7565\u4e0d\u8ba1\u3002\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201811\/2018-11-03_225028.png\" width=\"344\" height=\"140\" alt=\"\u5206\u9694\u4e0d\u660e\u663e\u7684\u7530\u5730\"><\/p>\n<\/li>\n<li>\u7530\u5730A-\u7530\u5784-\u7530\u5730B\uff0c\u4e0b\u9762\u662f\u571f\u5730C-\u7530\u5784-\u571f\u5730D\uff0c\u4e5f\u662f\u201c\u7530\u201d\u8fd9\u4e2a\u5b57\u7684\u6784\u9020\uff0c\u53ea\u4e0d\u8fc74\u5757\u5730\u4e4b\u95f4\u5206\u9694\u662f\u4e2a\u53ef\u4ee5\u8d70\u8def\u7684\u7530\u5784\uff0c\u6709\u7684\u5730\u65b9\u4e5f\u53eb\u571f\u57c2\u3002\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201811\/2018-11-03_225152.png\" width=\"344\" height=\"140\" alt=\"\u5206\u9694\u660e\u663e\u7684\u7530\u5730\"><\/p>\n<\/li>\n<\/ol>\n<p>\u8fd9\u91cc\u7684\u5212\u5206\u8bed\u6cd5\u5c31\u548c\u4e0a\u9762\u7684\u519c\u7530\u5212\u5206\u4e00\u81f4\uff0c\u5982\u4e0b\uff1a<\/p>\n<pre>.container {\r\n  grid-template-columns: &lt;track-size&gt; ... | &lt;line-name&gt; &lt;track-size&gt; ...;\r\n  grid-template-rows: &lt;track-size&gt; ... | &lt;line-name&gt; &lt;track-size&gt; ...;\r\n}<\/pre>\n<p>\u7528\u4e2d\u6587\u8868\u793a\u5c31\u662f\uff1a<\/p>\n<pre>.container {\r\n  grid-template-columns: &lt;\u7530\u5730&gt; ... \u6216 &lt;\u7530\u5784&gt; &lt;\u7530\u5730&gt; ...;\r\n  grid-template-rows: &lt;\u7530\u5730&gt; ... \u6216 &lt;\u7530\u5784&gt; &lt;\u7530\u5730&gt; ...;\r\n}<\/pre>\n<p>\u4e5f\u5c31\u662f\uff1a<\/p>\n<ul>\n<li><strong>&lt;track-size&gt;<\/strong>\uff1a\u5212\u5206\u7530\u5730\u7684\u5c3a\u5bf8\u3002\u53ef\u4ee5\u662f\u957f\u5ea6\u503c\uff0c\u767e\u5206\u6bd4\u503c\uff0c\u4ee5\u53ca<a href=\"#unit-fr\">fr\u5355\u4f4d<\/a>\uff08\u7f51\u683c\u5269\u4f59\u7a7a\u95f4\u6bd4\u4f8b\u5355\u4f4d\uff09\u3002<\/li>\n<li><strong>&lt;line-name&gt;<\/strong>\uff1a\u4e2d\u95f4\u7528\u6765\u8d70\u8def\u7684\u7530\u5784\u7684\u540d\u5b57\uff0c\u53ef\u4ee5\u4efb\u610f\u547d\u540d\u3002<\/li>\n<\/ul>\n<p>\u770b\u4e00\u4e2a\u7b80\u5355\u4f8b\u5b50\uff1a<\/p>\n<pre>.container {\r\n    grid-template-columns: 80px auto 100px;\r\n    grid-template-rows: 25% 100px auto 60px;\r\n}<\/pre>\n<p><code>grid-template-columns<\/code>\u540e\u97623\u4e2a\u503c\uff0c\u8868\u793a\u5206\u4e3a\u4e863\u5217\uff0c\u4ece\u5de6\u5f80\u53f3\u6bcf\u5217\u7684\u5c3a\u5bf8\u5206\u522b\u662f<code>80px<\/code>\uff0cauto\uff08\u81ea\u52a8\uff09\u548c<code>100px<\/code>\uff1b<br \/><code>grid-template-rows<\/code>\u5c5e\u6027\u503c\u542b4\u4e2a\u503c\uff0c\u8868\u793a\u5206\u4e3a\u4e864\u884c\uff0c\u4ece\u4e0a\u5f80\u4e0b\u6bcf\u884c\u7684\u9ad8\u5ea6\u5206\u522b\u662f<code>25%<\/code>\uff0c<code>100px<\/code>\uff0cauto\uff08\u81ea\u52a8\uff09\u548c<code>60px<\/code>\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201811\/2018-11-04_210143.png\" width=\"465\" height=\"431\" alt=\"\u57fa\u672c\u5c3a\u5bf8\u5212\u5206\u793a\u610f\u56fe\"><\/p>\n<p>\u5b9e\u65f6\u6548\u679c\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n<div class=\"grid grid-base-1\">\n<div class=\"grid-1-1\">\n<p class=\"grid-p\">\u5bbd80px<br \/>\u9ad825%<\/p>\n<\/div>\n<div class=\"grid-1-2\">\n<p class=\"grid-p\">\u5bbdauto<br \/>\u9ad825%<\/p>\n<\/div>\n<div class=\"grid-1-3\">\n<p class=\"grid-p\">\u5bbd100px<br \/>\u9ad825%<\/p>\n<\/div>\n<div class=\"grid-2-1\">\n<p class=\"grid-p\">\u5bbd80px<br \/>\u9ad8100px<\/p>\n<\/div>\n<div class=\"grid-2-2\">\n<p class=\"grid-p\">\u5bbdauto<br \/>\u9ad8100px<\/p>\n<\/div>\n<div class=\"grid-2-3\">\n<p class=\"grid-p\">\u5bbd100px<br \/>\u9ad8100px<\/p>\n<\/div>\n<div class=\"grid-3-1\">\n<p class=\"grid-p\">\u5bbd80px<br \/>\u9ad8auto<\/p>\n<\/div>\n<div class=\"grid-3-2\">\n<p class=\"grid-p\">\u5bbdauto<br \/>\u9ad8auto<\/p>\n<\/div>\n<div class=\"grid-3-3\">\n<p class=\"grid-p\">\u5bbd100px<br \/>\u9ad8auto<\/p>\n<\/div>\n<div class=\"grid-4-1\">\n<p class=\"grid-p\">\u5bbd80px<br \/>\u9ad860px<\/p>\n<\/div>\n<div class=\"grid-4-2\">\n<p class=\"grid-p\">\u5bbdauto<br \/>\u9ad860px<\/p>\n<\/div>\n<div class=\"grid-4-3\">\n<p class=\"grid-p\">\u5bbd100px<br \/>\u9ad860px<\/p>\n<\/div>\n<\/div>\n<p>\u6211\u4eec\u8fd8\u53ef\u4ee5\u7ed9\u201c\u7530\u5784\u201d\uff0c\u4e5f\u5c31\u662f\u7f51\u683c\u5206\u9694\u7ebf\u8fdb\u884c\u547d\u540d\uff0c\u8bed\u6cd5\u662f\u4f7f\u7528<code>[]<\/code>\u5305\u88f9\u6211\u4eec\u81ea\u5b9a\u4e49\u7684\u547d\u540d\uff0c\u53ef\u4ee5\u662f\u4e2d\u6587\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>.container {\r\n    grid-template-columns: [\u7b2c\u4e00\u6839\u7eb5\u7ebf] 80px [\u7eb5\u7ebf2] auto [\u7eb5\u7ebf3] 100px [\u6700\u540e\u7684\u7ed3\u675f\u7ebf];\r\n    grid-template-rows: [\u7b2c\u4e00\u884c\u5f00\u59cb] 25% [\u7b2c\u4e00\u884c\u7ed3\u675f] 100px [\u884c3] auto [\u884c4] 60px [\u884c\u672b];\r\n}<\/pre>\n<p>\u5b9e\u65f6\u6548\u679c\u5982\u4e0b\uff0c\u9009\u4e2d\u5bf9\u5e94\u7f51\u683c\u7ebf\u7684\u540d\u79f0\u53ef\u4ee5\u9ad8\u4eae\u5176\u4f4d\u7f6e\uff1a<\/p>\n<div id=\"lineRadioX\" class=\"grid-radio-x\"><span class=\"check-group\"><input type=\"radio\" id=\"lineName1\" name=\"lineName\" value=\"column-line1\" checked><label for=\"lineName1\" class=\"ui-radio\"><\/label><label for=\"lineName1\" class=\"mr20\">[\u7b2c\u4e00\u6839\u7eb5\u7ebf]<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"lineName2\" name=\"lineName\" value=\"column-line2\"><label for=\"lineName2\" class=\"ui-radio\"><\/label><label for=\"lineName2\" class=\"mr20\">[\u7eb5\u7ebf2]<\/label><\/span>  <span class=\"check-group\"><input type=\"radio\" id=\"lineName3\" name=\"lineName\" value=\"column-line3\"><label for=\"lineName3\" class=\"ui-radio\"><\/label><label for=\"lineName3\" class=\"mr20\">[\u7eb5\u7ebf3]<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"lineName4\" name=\"lineName\" value=\"column-line4\"><label for=\"lineName4\" class=\"ui-radio\"><\/label><label for=\"lineName4\" class=\"mr20\">[\u6700\u540e\u7684\u7ed3\u675f\u7ebf]<\/label><\/span><\/p>\n<p><span class=\"check-group\"><input type=\"radio\" id=\"lineName5\" name=\"lineName\" value=\"row-line1\"><label for=\"lineName5\" class=\"ui-radio\"><\/label><label for=\"lineName5\" class=\"mr20\">[\u7b2c\u4e00\u884c\u5f00\u59cb]<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"lineName6\" name=\"lineName\" value=\"row-line2\"><label for=\"lineName6\" class=\"ui-radio\"><\/label><label for=\"lineName6\" class=\"mr20\">[\u7b2c\u4e00\u884c\u7ed3\u675f]<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"lineName7\" name=\"lineName\" value=\"row-line3\"><label for=\"lineName7\" class=\"ui-radio\"><\/label><label for=\"lineName7\" class=\"mr20\">[\u884c3]<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"lineName8\" name=\"lineName\" value=\"row-line4\"><label for=\"lineName8\" class=\"ui-radio\"><\/label><label for=\"lineName8\" class=\"mr20\">[\u884c4]<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"lineName9\" name=\"lineName\" value=\"row-line5\"><label for=\"lineName9\" class=\"ui-radio\"><\/label><label for=\"lineName9\" class=\"mr20\">[\u884c\u672b]<\/label><\/span><\/div>\n<div id=\"gridLineName\" class=\"grid grid-base-2\" data-type=\"column-line1\">\n<div class=\"grid-1-1\">\n<p class=\"grid-p\">\u5bbd80px<br \/>\u9ad825%<\/p>\n<\/div>\n<div class=\"grid-1-2\">\n<p class=\"grid-p\">\u5bbdauto<br \/>\u9ad825%<\/p>\n<\/div>\n<div class=\"grid-1-3\">\n<p class=\"grid-p\">\u5bbd100px<br \/>\u9ad825%<\/p>\n<\/div>\n<div class=\"grid-2-1\">\n<p class=\"grid-p\">\u5bbd80px<br \/>\u9ad8100px<\/p>\n<\/div>\n<div class=\"grid-2-2\">\n<p class=\"grid-p\">\u5bbdauto<br \/>\u9ad8100px<\/p>\n<\/div>\n<div class=\"grid-2-3\">\n<p class=\"grid-p\">\u5bbd100px<br \/>\u9ad8100px<\/p>\n<\/div>\n<div class=\"grid-3-1\">\n<p class=\"grid-p\">\u5bbd80px<br \/>\u9ad8auto<\/p>\n<\/div>\n<div class=\"grid-3-2\">\n<p class=\"grid-p\">\u5bbdauto<br \/>\u9ad8auto<\/p>\n<\/div>\n<div class=\"grid-3-3\">\n<p class=\"grid-p\">\u5bbd100px<br \/>\u9ad8auto<\/p>\n<\/div>\n<div class=\"grid-4-1\">\n<p class=\"grid-p\">\u5bbd80px<br \/>\u9ad860px<\/p>\n<\/div>\n<div class=\"grid-4-2\">\n<p class=\"grid-p\">\u5bbdauto<br \/>\u9ad860px<\/p>\n<\/div>\n<div class=\"grid-4-3\">\n<p class=\"grid-p\">\u5bbd100px<br \/>\u9ad860px<\/p>\n<\/div>\n<\/div>\n<p><strong>\u4e3a\u4f55\u8981\u7ed9\u7f51\u683c\u7ebf\u547d\u540d\u5462\uff1f<\/strong><\/p>\n<p>Grid\u5e03\u5c40\u7684\u597d\u6bd4\u8857\u9053\u5212\u5206\uff0c\u7530\u5730\u5212\u5206\uff0c\u8fd9\u4e2d\u95f4\u5206\u9694\u7684\u7ebf\u901a\u5e38\u5c31\u662f\u9053\u8def\u6216\u8005\u7530\u5784\uff0c\u5982\u679c\u6211\u4eec\u4e0d\u7ed9\u8fd9\u4e9b\u9053\u8def\u8d77\u4e2a\u540d\u5b57\uff0c\u56de\u5934\u60f3\u8981\u63cf\u8ff0\u67d0\u7247\u533a\u57df\u7684\u65f6\u5019\u5c31\u4e0d\u597d\u63cf\u8ff0\u3002\u6bd4\u65b9\u8bf4\uff1a<\/p>\n<blockquote><p>\u5357\u4eac\u4e1c\u8def\u4e1c\u8d77\u5916\u6ee9\u5373\u4e2d\u5c71\u4e1c\u4e00\u8def\uff0c\u897f\u81f3\u897f\u85cf\u4e2d\u8def\u3002<\/p><\/blockquote>\n<p>\u56e0\u4e3a\u6211\u4eec\u7ed9\u9053\u8def\u547d\u4e86\u540d\u79f0\uff0c\u56e0\u6b64\uff0c\u6211\u4eec\u5728\u63cf\u8ff0\u67d0\u4e2a\u533a\u57df\u7684\u65f6\u5019\uff0c\u5c31\u597d\u63cf\u8ff0\uff0c\u522b\u4eba\u4e5f\u597d\u8fa8\u8ba4\u3002\u4f46\u5982\u679c\u6ca1\u6709\u547d\u540d\uff0c\u800c\u662f\u4e0b\u9762\u8fd9\u6837\u63cf\u8ff0\uff1a<\/p>\n<blockquote><p>\u5357\u4eac\u4e1c\u8def\u4e1c\u8d77\u9760\u8fd1\u9ec4\u6d66\u6c5f\u7b2c1\u6761\u8def\uff0c\u9760\u8fd1\u9ec4\u6d66\u6c5f\u7b2c8\u6761\u8def\u3002<\/p><\/blockquote>\n<p>\u5f97\uff0c\u8fd9\u4e2a\u533a\u57df\u63cf\u8ff0\u5c31\u6709\u95ee\u9898\uff0c\u4e07\u4e00\u54ea\u5929\u5c01\u8def\uff0c\u6216\u8005\u65b0\u5efa\u4e86\u6761\u8def\uff0c\u5c82\u4e0d\u5c31\u6df7\u4e71\u4e86\uff1f<\/p>\n<p>\u4e5f\u5c31\u662f\u8bf4\uff0c\u7ed9Grid\u5e03\u5c40\u4e2d\u7684\u5206\u9694\u7ebf\u547d\u540d\uff0c\u4e3a\u7684\u5c31\u662f\u53ef\u4ee5\u66f4\u597d\u5730\u5bf9\u533a\u57df\u8fdb\u884c\u63cf\u8ff0\u3002\u5982\u679c\u6211\u4eec\u6ca1\u6709\u63cf\u8ff0\u67d0\u7247\u533a\u57df\u7684\u7684\u9700\u6c42\uff0c\u81ea\u7136\u4e5f\u4e0d\u9700\u8981\u547d\u540d\u4e86\u3002<\/p>\n<p><strong>\u53cc\u547d\u540d<\/strong><\/p>\n<p>\u7531\u4e8e\u7f51\u683c\u4e2d\u4e2d\u95f4\u533a\u57df\u7684\u7f51\u683c\u7ebf\u662f\u4e24\u8fb9\u683c\u5b50\u516c\u7528\u7684\uff0c\u5c31\u50cf\u9053\u8def\u6709\u4e24\u8fb9\uff0c\u56e0\u6b64\uff0c\u6211\u4eec\u8d77\u540d\u5b57\u7684\u65f6\u5019\u53ef\u4ee5\u8d77\u4e24\u4e2a\u540d\u79f0\uff08\u4f7f\u7528\u7a7a\u683c\u5206\u9694\uff09\uff0c\u5206\u522b\u8868\u793a\u4e24\u4fa7\u3002\u4f8b\u5982\uff1a<\/p>\n<pre>.container {\r\n    grid-template-columns: [\u7b2c\u4e00\u6839\u7eb5\u7ebf] 80px <span style=\"color:#cd0000;\">[\u7b2c1\u6839\u7eb5\u7ebf\u7ed3\u675f \u7b2c2\u6839\u7eb5\u7ebf\u5f00\u59cb]<\/span> 100px [\u6700\u540e\u7684\u7ed3\u675f\u7ebf];\r\n}<\/pre>\n<p><strong>repeat\u8bed\u6cd5<\/strong><\/p>\n<p>\u6709\u65f6\u5019\uff0c\u6211\u4eec\u7f51\u683c\u7684\u5212\u5206\u662f\u5f88\u89c4\u5f8b\u7684\uff0c\u4f8b\u5982\uff0c\u57fa\u4e8e<code>40px<\/code>\u521b\u5efa\u6805\u683c\uff0c\u8981\u662f\u6211\u4eec\u5e03\u5c40\u5bbd\u5ea6<code>960px<\/code>\uff0c\u5c82\u4e0d\u662f\u8981\u519924\u6b21<code>40px<\/code>\uff0c\u5b9e\u5728\u5957\u5570\u55e6\u4e86\uff0c\u6b64\u65f6\uff0c\u5c31\u53ef\u4ee5\u4f7f\u7528<code>repeat()<\/code>\u8bed\u6cd5\uff0c\u5982\u4e0b\u793a\u610f\uff1a<\/p>\n<pre>.container {\r\n    grid-template-columns: repeat(24, 40px [col-start]);\r\n}<\/pre>\n<p>\u7b49\u540c\u4e8e\uff1a<\/p>\n<pre>.container {\r\n    grid-template-columns: 40px [col-start], 40px [col-start], <span style=\"color:green;\">\/* ...\u7701\u756520\u4e2a...*\/<\/span>, 40px [col-start], 40px [col-start];\r\n}<\/pre>\n<p id=\"unit-fr\"><strong>fr\u5355\u4f4d\u662f\u4ec0\u4e48\uff1f<\/strong><\/p>\n<p><code>fr<\/code>\u662f\u5355\u8bcdfraction\u7684\u7f29\u5199\uff0c\u8868\u793a\u5206\u6570\u3002<\/p>\n<ul>\n<li>\n<p>\u5148\u4ece\u7b80\u5355\u4f8b\u5b50\u770b\u8d77\uff1a<\/p>\n<pre>.container {\r\n    grid-template-columns: 1fr 1fr 1fr;\r\n}<\/pre>\n<p>1:1:1\uff0c\u7f51\u683c\u5bbd\u5ea6\u4e09\u7b49\u5206\uff0c\u5b9e\u65f6\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<div class=\"grid grid-base-3\">\n<div>\n<p class=\"grid-p\">\u5bbd1fr<br \/>\u5360\u636e1\/3<\/p>\n<\/div>\n<div>\n<p class=\"grid-p\">\u5bbd1fr<br \/>\u5360\u636e1\/3<\/p>\n<\/div>\n<div>\n<p class=\"grid-p\">\u5bbd1fr<br \/>\u5360\u636e1\/3<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<p>\u5982\u679c\u6709\u56fa\u5b9a\u5c3a\u5bf8\u503c\uff0c\u5219\u5212\u5206\u5269\u4f59\u7a7a\u95f4\u5927\u5c0f\uff0c\u4f8b\u5982\uff1a<\/p>\n<pre>.container {\r\n    grid-template-columns: 200px 1fr 1fr 1fr;\r\n}<\/pre>\n<p>4\u5217\uff0c\u540e\u97623\u5217\u5bbd\u5ea6\u662fgrid\u5bb9\u5668\u5bbd\u5ea6\u51cf\u53bb200\u50cf\u7d20\u540e\u76841\/3\u5927\u5c0f\uff0c\u5b9e\u65f6\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<div class=\"grid grid-base-4\">\n<div>\n<p class=\"grid-p\">\u5bbd200px<\/p>\n<\/div>\n<div>\n<p class=\"grid-p\">\u5bbd1fr<\/p>\n<\/div>\n<div>\n<p class=\"grid-p\">\u5bbd1fr<\/p>\n<\/div>\n<div>\n<p class=\"grid-p\">\u5bbd1fr<\/p>\n<\/div>\n<\/div>\n<\/li>\n<li>\n<p>\u5982\u679c\u548cauto\u6df7\u7528\u4f1a\u5982\u4f55\u5462\uff1f<\/p>\n<pre>.container {\r\n    grid-template-columns: auto 1fr 1fr 1fr;\r\n}<\/pre>\n<div class=\"grid grid-base-5\">\n<div>\n<p class=\"grid-p\">\u5bbdauto<\/p>\n<\/div>\n<div>\n<p class=\"grid-p\">\u5bbd1fr<\/p>\n<\/div>\n<div>\n<p class=\"grid-p\">\u5bbd1fr<\/p>\n<\/div>\n<div>\n<p class=\"grid-p\">\u5bbd1fr<\/p>\n<\/div>\n<\/div>\n<p>\u4ece\u4e0a\u9762\u6548\u679c\u53ef\u4ee5\u770b\u51fa\uff0c\u5f53\u6709\u8bbe\u7f6e<code>fr<\/code>\u5c3a\u5bf8\u7684\u65f6\u5019\uff0c<code>auto<\/code>\u7684\u5c3a\u5bf8\u8868\u73b0\u4e3a\u201c\u5305\u88f9\u201d\uff0c\u4e3a\u5185\u5bb9\u5bbd\u5ea6\u3002\u5982\u679c\u6ca1\u6709\u8bbe\u7f6e<code>fr<\/code>\u5c3a\u5bf8\u7684\u7f51\u683c\uff0c\u5219\u8868\u73b0\u4e3a\u62c9\u4f38\u3002<\/p>\n<\/li>\n<li>\n<p>\u5982\u679c<code>fr<\/code>\u6570\u503c\u4e4b\u548c\u5c0f\u4e8e1\u53c8\u5f53\u5982\u4f55\uff1f<\/p>\n<pre>.container {\r\n    grid-template-columns: auto 0.25fr .25fr .25fr;\r\n}<\/pre>\n<div class=\"grid grid-base-6\">\n<div>\n<p class=\"grid-p\">\u5bbdauto<\/p>\n<\/div>\n<div>\n<p class=\"grid-p\">\u5bbd0.25fr<\/p>\n<\/div>\n<div>\n<p class=\"grid-p\">\u5bbd0.25fr<\/p>\n<\/div>\n<div>\n<p class=\"grid-p\">\u5bbd0.25fr<\/p>\n<\/div>\n<\/div>\n<\/li>\n<p>\u8fd9\u91cc\u8ba1\u7b97\u5c31\u76f8\u5bf9\u590d\u6742\u4e9b\uff0c\u9996\u5148\uff0c\u7531\u4e8e\u7b2c\u4e00\u4e2a\u7f51\u683c\u5c3a\u5bf8\u8bbe\u7f6e\u4e3a<code>auto<\/code>\uff0c\u56e0\u6b64<code>fr<\/code>\u8ba1\u7b97\u9700\u8981\u7684\u5269\u4f59\u7a7a\u95f4\u5c3a\u5bf8\u662fgrid\u5bb9\u5668\u7684\u5bbd\u5ea6\u51cf\u53bb\u201c\u5bbdauto\u201d\u8fd9\u51e0\u4e2a\u5b57\u7b26\u7684\u5bbd\u5ea6\u3002\u6240\u4ee5\uff0c\u540e\u97623\u4e2a<code>0.25fr<\/code>\u5143\u7d20\u7684\u5bbd\u5ea6\u662f\uff1a<code>(\u5bb9\u5668\u5bbd\u5ea6 - \u201c\u5bbdauto\u201d\u5b57\u7b26\u5bbd\u5ea6) * 0.25<\/code>\u3002\u7136\u540e\u5269\u4f59\u5c3a\u5bf8\u5c31\u662f\u7b2c\u4e00\u4e2a\u7f51\u683c\u5bbd\u5ea6\u3002<\/p>\n<\/ul>\n<h4 id=\"grid-template-areas\">2. grid-template-areas<\/h4>\n<p>area\u662f\u533a\u57df\u7684\u610f\u601d\uff0c<code>grid-template-areas<\/code>\u5c31\u662f\u7ed9\u6211\u4eec\u7684\u7f51\u683c\u5212\u5206\u533a\u57df\u7684\uff0c\u5c31\u597d\u50cf\u5f20\u8001\u677f\u627f\u5305\u7684\u571f\u5730\u5212\u5206\u4e0d\u540c\u533a\u57df\u517b\u6b96\u4e0d\u540c\u7684\u519c\u4f5c\u7269\u6216\u8005\u6c34\u4ea7\u54c1\u3002<\/p>\n<p>\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>.container {\r\n  grid-template-areas: \r\n    \"&lt;grid-area-name&gt; | . | none | ...\"\r\n    \"...\";\r\n}<\/pre>\n<p>\u5176\u4e2d\uff1a<\/p>\n<dl class=\"grid-dl\">\n<dt>grid-area-name<\/dt>\n<dd>\u5bf9\u5e94\u7f51\u683c\u533a\u57df\u7684\u540d\u79f0\u3002<\/dd>\n<dt>.<\/dt>\n<dd>\u8868\u793a\u7a7a\u7684\u7f51\u683c\u5355\u5143\u683c\u3002<\/dd>\n<dt>none<\/dt>\n<dd>\u6ca1\u6709\u5b9a\u4e49\u7f51\u683c\u533a\u57df\u3002<\/dd>\n<\/dl>\n<p id=\"demo-areas\">\u6211\u4eec\u8fd8\u662f\u901a\u8fc7\u6848\u4f8b\u4e86\u89e3\u8fd9\u4e2aCSS\u5c5e\u6027\u3002\u5f20\u8001\u677f\u627f\u5305\u4e86\u4e00\u5757\u5730\uff0c\u7136\u540e\u5212\u5206\u6210\u4e863*4\u517112\u4e2a\u5c0f\u683c\u5b50\uff0c\u7136\u540e\u5f20\u8001\u677f\u5e0c\u671b\u6700\u4e0a\u97623\u4e2a\u683c\u5b50\u79cd\u8461\u8404\uff0c\u6700\u4e0b\u97623\u4e2a\u683c\u5b50\u79cd\u897f\u74dc\uff0c\u4e2d\u95f46\u4e2a\u683c\u5b50\uff0c\u5de6\u8fb92\u4e2a\u517b\u9f99\u867e\uff0c\u53f3\u8fb94\u4e2a\u517b\u9c7c\u3002\u5982\u4e0b\u56fe\u793a\u610f\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201811\/2018-11-04_221703.png\" width=\"422\" height=\"408\" alt=\"\u517b\u6b96\u627f\u5305\u533a\u57df\u5212\u5206\u793a\u610f\"><\/p>\n<p>\u5219\u5bf9\u5e94CSS\u4ee3\u7801\u5982\u4e0b\uff1a<\/p>\n<pre>.container {\r\n    grid-template-columns: 1fr 1fr 1fr;\r\n    grid-template-rows: 1fr 1fr 1fr 1fr;\r\n    grid-template-areas: \r\n        \"\u8461\u8404 \u8461\u8404 \u8461\u8404\"\r\n        \"\u9f99\u867e \u517b\u9c7c \u517b\u9c7c\"\r\n        \"\u9f99\u867e \u517b\u9c7c \u517b\u9c7c\"\r\n        \"\u897f\u74dc \u897f\u74dc \u897f\u74dc\";\r\n}<\/pre>\n<p>12\u4e2a\u683c\u5b50\uff0c\u56db\u7247\u533a\u57df\uff0c\u56e0\u6b64\uff0c\u6211\u4eecgrid\u5b50\u9879\u53ea\u9700\u89814\u4e2a\u5143\u7d20\u5373\u53ef\uff0cHTML\u793a\u610f\u5982\u4e0b\uff1a<\/p>\n<pre>&lt;div class=\"container\"&gt;\r\n    &lt;div class=\"putao\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"longxia\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"yangyu\"&gt;&lt;\/div&gt;\r\n    &lt;div class=\"xigua\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>\u6b64\u65f6grid\u5b50\u9879\u53ea\u8981\u4f7f\u7528<code>grid-area<\/code>\u5c5e\u6027\u6307\u5b9a\u5176\u96b6\u5c5e\u4e8e\u90a3\u4e2a\u533a\u57df\u5c31\u53ef\u4ee5\u4e86\uff08\u652f\u6301\u4e2d\u6587\u533a\u57df\u540d\u79f0\uff09\uff1a<\/p>\n<pre>.putao { grid-area: \u8461\u8404; }\r\n.longxia { grid-area: \u9f99\u867e; }\r\n.yangyu { grid-area: \u517b\u9c7c; }\r\n.xigua { grid-area: \u897f\u74dc; }<\/pre>\n<p>\u5b9e\u65f6Grid\u5e03\u5c40\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<div class=\"grid grid-base-7\">\n<div class=\"putao\">\n<p class=\"grid-p\">\u8461\u8404\u79cd\u690d\u533a<\/p>\n<\/div>\n<div class=\"longxia\">\n<p class=\"grid-p\">\u9f99\u867e\u517b\u6b96\u533a<\/p>\n<\/div>\n<div class=\"yangyu\">\n<p class=\"grid-p\">\u9c7c\u7c7b\u517b\u6b96\u533a<\/p>\n<\/div>\n<div class=\"xigua\">\n<p class=\"grid-p\">\u897f\u74dc\u79cd\u690d\u533a<\/p>\n<\/div>\n<\/div>\n<p><strong>\u6ce8\u610f\uff1a<\/strong>\u5982\u679c\u6211\u4eec\u7ed9\u7f51\u683c\u533a\u57df\u547d\u4e86\u540d\uff0c\u4f46\u662f\u6ca1\u6709\u7ed9\u7f51\u683c\u7ebf\u547d\u540d\uff0c\u5219\u4f1a\u81ea\u52a8\u6839\u636e\u7f51\u683c\u533a\u57df\u540d\u79f0\u751f\u6210\u7f51\u683c\u7ebf\u540d\u79f0\uff0c\u89c4\u5219\u662f\u533a\u57df\u540d\u79f0\u540e\u9762\u52a0<code>-start<\/code>\u548c<code>-end<\/code>\u3002\u4f8b\u5982\uff0c\u67d0\u7f51\u683c\u533a\u57df\u540d\u79f0\u662f\u201c\u8461\u8404\u201d\uff0c\u5219\u5de6\u4fa7column\u7ebf\u540d\u79f0\u5c31\u662f\u201c\u8461\u8404-start\u201d\uff0c\u5de6\u4fa7column\u7ebf\u540d\u79f0\u5c31\u662f\u201c\u8461\u8404-end\u201d\u3002<\/p>\n<p>\u4ee5\u53ca\uff0c\u6211\u4eec\u7684\u7f51\u683c\u533a\u57df\u4e00\u5b9a\u8981\u5f62\u6210\u89c4\u6574\u7684\u77e9\u5f62\u533a\u57df\uff0c\u4ec0\u4e48L\u5f62\uff0c\u51f9\u7684\u6216\u51f8\u7684\u5f62\u72b6\u90fd\u662f\u4e0d\u652f\u6301\u7684\uff0c\u4f1a\u8ba4\u4e3a\u662f\u65e0\u6548\u7684\u5c5e\u6027\u503c\u3002<\/p>\n<p><span class=\"s\">\/\/zxx: \u5b9e\u9645\u5f00\u53d1\u7684\u65f6\u5019\uff0c\u8461\u8404\u79cd\u690d\u533a\u5c31\u662f\u5934\u90e8\u533a\u57df\uff0c\u9f99\u867e\u5c31\u662f\u4fa7\u8fb9\u680f\u533a\u57df\uff0c\u9c7c\u7c7b\u517b\u6b96\u533a\u5c31\u662f\u4e3b\u533a\u57df\uff0c\u897f\u74dc\u79cd\u690d\u533a\u5c31\u662f\u5e95\u90e8\u533a\u57df\u3002<\/span><\/p>\n<h4 id=\"grid-template\">3. grid-template<\/h4>\n<p><code>grid-template<\/code>\u662f<code><a href=\"#grid-template-columns-rows\">grid-template-rows<\/a><\/code>\uff0c<code><a href=\"#grid-template-columns-rows\">grid-template-columns<\/a><\/code>\u548c<a href=\"#grid-template-areas\"><code>grid-template-areas<\/code><\/a>\u5c5e\u6027\u7684\u7f29\u5199\u3002<\/p>\n<p>\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>.container {\r\n    grid-template: none;\r\n}\r\n.container {\r\n    grid-template: &lt;grid-template-rows&gt; \/ &lt;grid-template-columns&gt;;\r\n}<\/pre>\n<p>\u5176\u4e2d<code>none<\/code>\u8868\u793a\u5c063\u4e2aCSS\u5c5e\u6027\u90fd\u8bbe\u7f6e\u4e3a\u521d\u59cb\u503c\u3002<\/p>\n<p>\u4e3e\u4e2a\u4f8b\u5b50\uff0c\u524d\u9762\u5f20\u8001\u677f\u517b\u6b96\u533a\u5212\u5206\uff0c\u7528<code>grid-template<\/code>\u7f29\u5199\u8868\u793a\u5c31\u662f\uff1a<\/p>\n<pre>.container {\r\n    grid-template: \r\n        \"\u8461\u8404 \u8461\u8404 \u8461\u8404\" 1fr \r\n        \"\u9f99\u867e \u517b\u9c7c \u517b\u9c7c\" 1fr \r\n        \"\u9f99\u867e \u517b\u9c7c \u517b\u9c7c\" 1fr \r\n        \"\u897f\u74dc \u897f\u74dc \u897f\u74dc\" 1fr\r\n        \/1fr 1fr 1fr;\r\n}<\/pre>\n<p>\u5b9e\u65f6\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<div class=\"grid grid-base-8\">\n<div class=\"putao\">\n<p class=\"grid-p\">\u8461\u8404\u79cd\u690d\u533a<\/p>\n<\/div>\n<div class=\"longxia\">\n<p class=\"grid-p\">\u9f99\u867e\u517b\u6b96\u533a<\/p>\n<\/div>\n<div class=\"yangyu\">\n<p class=\"grid-p\">\u9c7c\u7c7b\u517b\u6b96\u533a<\/p>\n<\/div>\n<div class=\"xigua\">\n<p class=\"grid-p\">\u897f\u74dc\u79cd\u690d\u533a<\/p>\n<\/div>\n<\/div>\n<p>\u7531\u4e8e<code>grid-template<\/code>\u4e0d\u4f1a\u91cd\u7f6e\u4e00\u4e9b\u9690\u5f0f\u7684grid\u5c5e\u6027\uff08\u5982<a href=\"#grid-auto-columns\">grid-auto-columns<code><\/code><\/a>\uff0c<a href=\"#grid-auto-rows\"><code>grid-auto-rows<\/code><\/a>\u548c<a href=\"#grid-auto-flow\"><code>grid-auto-flow<\/code><\/a>\uff09\uff0c\u56e0\u6b64\uff0c\u5927\u591a\u6570\u65f6\u5019\uff0c\u8fd8\u662f\u63a8\u8350\u4f7f\u7528<a href=\"#grid-grid\"><code>grid<\/code><\/a>\u4ee3\u66ff<code>grid-template<\/code>\u3002<\/p>\n<h4 id=\"grid-column-row-gap\">4. grid-column-gap\u548cgrid-row-gap<\/h4>\n<p><code>grid-column-gap<\/code>\u548c<code>grid-row-gap<\/code>\u5c5e\u6027\u7528\u6765\u5b9a\u4e49\u7f51\u683c\u4e2d\u7f51\u683c\u95f4\u9699\u7684\u5c3a\u5bf8\u3002\u4f60\u53ef\u4ee5\u7406\u89e3\u6210\u7530\u5730\u4e4b\u95f4\u8d70\u8def\u7684\u7530\u5784\u5bbd\u5ea6\u3002<\/p>\n<p>\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>.container {\r\n  grid-column-gap: &lt;line-size&gt;;\r\n  grid-row-gap: &lt;line-size&gt;;\r\n}<\/pre>\n<p><strong>\u66f4\u65b0\u4e8e2021-05-26<\/strong><br \/>\n\u63a8\u8350\u4f7f\u7528<code>column-gap<\/code>\u548c<code>row-gap<\/code>\u5c5e\u6027\uff0c\u517c\u5bb9\u6027\u4e5f\u4e0d\u9519\u3002<\/p>\n<pre>.container {\r\n  column-gap: &lt;line-size&gt;;\r\n  row-gap: &lt;line-size&gt;;\r\n}<\/pre>\n<p><span class=\"s\">\/\/zxx: \u66f4\u65b0end<\/span><\/p>\n<p>\u5176\u4e2d\uff1a<\/p>\n<dl class=\"grid-dl\">\n<dt>&lt;line-size&gt;<\/dt>\n<dd>\u7f51\u683c\u95f4\u7684\u95f4\u9699\u5c3a\u5bf8\u3002<\/dd>\n<\/dl>\n<p>\u5b9e\u4f8b\u8bf4\u8bdd\uff0c\u7ed9\u5b9a\u4e00\u4e2a\u7b80\u5355\u76842&#215;2\u7f51\u683c\uff0c\u8bbe\u7f6e\u6c34\u5e73\u7f51\u683c\u95f4\u9699<code>10px<\/code>\uff0c\u5782\u76f4\u65b9\u5411<code>15px<\/code>\uff0c\u5982\u4e0b\uff1a<\/p>\n<pre>.container {\r\n    grid-template-columns: 2fr 1fr;\r\n    grid-template-rows: 1fr 2fr;\r\n    grid-column-gap: 10px;\r\n    grid-row-gap: 15px;\r\n}<\/pre>\n<p>\u6d4f\u89c8\u5668\u5b9e\u65f6\u5e03\u5c40\u6e32\u67d3\u5982\u4e0b\uff1a<\/p>\n<div class=\"grid grid-base-9\">\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<\/div>\n<h4 id=\"grid-gap\">5. grid-gap<\/h4>\n<p><strong>\u66f4\u65b0\u4e8e2021-05-26<\/strong><br \/>\n\u63a8\u8350\u4f7f\u7528<code>gap<\/code>\u5c5e\u6027\u4f5c\u4e3a\u7f29\u5199\uff0c<code>grid-gap<\/code>\u5df2\u7ecf\u5f88\u8001\u4e86\u3002Multi-column\u5e03\u5c40\uff0c\u4ee5\u53caFlex\u5e03\u5c40\u7684\u95f4\u9699\u73b0\u5728\u4e5f\u90fd\u7edf\u4e00\u4f7f\u7528<code>gap<\/code>\u5c5e\u6027\u4e86\u3002<\/p>\n<p><span class=\"s\">\/\/zxx: \u66f4\u65b0end<\/span><\/p>\n<p>CSS <code>grid-gap<\/code>\u5c5e\u6027\u662f<code>grid-column-gap<\/code>\u548c<code>grid-row-gap<\/code>\u5c5e\u6027\u7684\u7f29\u5199\u3002\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>.container {\r\n    grid-gap: &lt;grid-row-gap&gt; &lt;grid-column-gap&gt;;\r\n}<\/pre>\n<p>\u5148\u6a2arow\u540e\u7ad6column\uff0c\u8fd9\u4e2a\u6bd4\u8f83\u597d\u8bb0\u5fc6\uff0c\u53e4\u8bed\u6709\u4e91\uff1a\u201c\u6a2a\u7ad6\u90fd\u662f\u6b7b\u201d\uff0c\u5148\u6a2a\u540e\u7ad6\uff0c\u7f51\u683c\u7684\u95f4\u9699\u5c31\u50cf\u662f\u6c49\u5b57\u201c\u7530\u201d\u4e2d\u95f4\u7684\u90a3\u4e2a\u201c\u5341\u201d\uff0c\u6309\u7167\u6c49\u5b57\u4e66\u5199\uff0c\u5148\u6a2a\u540e\u7ad6\uff0c\u5c31\u8bb0\u4f4f\u4e86\u3002<\/p>\n<p>\u4f8b\u5982\uff0c\u4e0a\u9762\u76842&#215;2\u7f51\u683c\u95f4\u9699\u6848\u4f8b\u4e5f\u53ef\u4ee5\u5199\u4f5c\uff1a<\/p>\n<pre>.container {\r\n    grid-template-columns: 2fr 1fr;\r\n    grid-template-rows: 1fr 2fr;\r\n    grid-gap: 15px 10px;\r\n}<\/pre>\n<p>\u6548\u679c\u4e00\u6837\u7684\uff0c\u8fd9\u91cc\u5c31\u4e0d\u5360\u636e\u7bc7\u5e45\u91cd\u590d\u793a\u610f\u4e86\u3002<\/p>\n<h4 id=\"justify-items\">6. justify-items<\/h4>\n<p><code>justify-items<\/code>\u6307\u5b9a\u4e86\u7f51\u683c\u5143\u7d20\u7684\u6c34\u5e73\u5448\u73b0\u65b9\u5f0f\uff0c\u662f\u6c34\u5e73\u62c9\u4f38\u663e\u793a\uff0c\u8fd8\u662f\u5de6\u4e2d\u53f3\u5bf9\u9f50\uff0c\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>.container {\r\n    justify-items: stretch | start | end | center;\r\n}<\/pre>\n<p>\u5176\u4e2d\uff1a<\/p>\n<dl class=\"grid-dl\">\n<dt>stretch<\/dt>\n<dd><del datetime=\"2020-05-28T16:28:51+00:00\">\u9ed8\u8ba4\u503c\uff0c<\/del>\u62c9\u4f38\u3002\u8868\u73b0\u4e3a\u6c34\u5e73\u586b\u5145\u3002\u66f4\u6b63\uff1a\u9ed8\u8ba4\u503c\u662f<code>legacy<\/code>\u3002<\/dd>\n<dt>start<\/dt>\n<dd>\u8868\u73b0\u4e3a\u7f51\u683c\u6c34\u5e73\u5c3a\u5bf8\u6536\u7f29\u4e3a\u5185\u5bb9\u5927\u5c0f\uff0c\u540c\u65f6\u6cbf\u7740\u7f51\u683c\u7ebf\u5de6\u4fa7\u5bf9\u9f50\u663e\u793a\uff08\u5047\u8bbe\u6587\u6863\u6d41\u65b9\u5411\u6ca1\u6709\u53d8\uff09\u3002<\/dd>\n<dt>end<\/dt>\n<dd>\u8868\u73b0\u4e3a\u7f51\u683c\u6c34\u5e73\u5c3a\u5bf8\u6536\u7f29\u4e3a\u5185\u5bb9\u5927\u5c0f\uff0c\u540c\u65f6\u6cbf\u7740\u7f51\u683c\u7ebf\u53f3\u4fa7\u5bf9\u9f50\u663e\u793a\uff08\u5047\u8bbe\u6587\u6863\u6d41\u65b9\u5411\u6ca1\u6709\u53d8\uff09\u3002<\/dd>\n<dt>center<\/dt>\n<dd>\u8868\u73b0\u4e3a\u7f51\u683c\u6c34\u5e73\u5c3a\u5bf8\u6536\u7f29\u4e3a\u5185\u5bb9\u5927\u5c0f\uff0c\u540c\u65f6\u5728\u5f53\u524d\u7f51\u683c\u533a\u57df\u5185\u90e8\u6c34\u5e73\u5c45\u4e2d\u5bf9\u9f50\u663e\u793a\uff08\u5047\u8bbe\u6587\u6863\u6d41\u65b9\u5411\u6ca1\u6709\u53d8\uff09\u3002<\/dd>\n<\/dl>\n<p>\u5404\u4e2a\u5c5e\u6027\u503c\u5b9e\u65f6\u6548\u679c\u5982\u4e0b\uff08\u70b9\u51fb\u5355\u9009\u6846\u4f53\u9a8c\u4e0d\u540c\u5c5e\u6027\u503c\u5e03\u5c40\u6548\u679c\uff09\uff1a<\/p>\n<div class=\"grid-radio-x jsGridRadio\"><span class=\"check-group\"><input type=\"radio\" id=\"justifyItems1\" name=\"justifyItems\" value=\"stretch\" checked><label for=\"justifyItems1\" class=\"ui-radio\"><\/label><label for=\"justifyItems1\" class=\"mr20\">stretch<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"justifyItems2\" name=\"justifyItems\" value=\"start\"><label for=\"justifyItems2\" class=\"ui-radio\"><\/label><label for=\"justifyItems2\" class=\"mr20\">start<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"justifyItems3\" name=\"justifyItems\" value=\"end\"><label for=\"justifyItems3\" class=\"ui-radio\"><\/label><label for=\"justifyItems3\" class=\"mr20\">end<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"justifyItems4\" name=\"justifyItems\" value=\"center\"><label for=\"justifyItems4\" class=\"ui-radio\"><\/label><label for=\"justifyItems4\">center<\/label><\/span><\/div>\n<div class=\"grid grid-base-10\" id=\"justifyItems\">\n<div data-index=\"1\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72471\" width=\"128\" height=\"86\" class=\"size-small\"><\/div>\n<div data-index=\"2\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm2.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm2.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72472\" width=\"96\" height=\"128\" class=\"size-small\"><\/div>\n<div data-index=\"3\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm3.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm3.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72473\" width=\"128\" height=\"96\" class=\"size-small\"><\/div>\n<div data-index=\"4\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm4.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm4.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72474\" width=\"128\" height=\"96\" class=\"size-small\"><\/div>\n<\/div>\n<h4 id=\"align-items\">7. align-items<\/h4>\n<p><code>align-items<\/code>\u6307\u5b9a\u4e86\u7f51\u683c\u5143\u7d20\u7684\u5782\u76f4\u5448\u73b0\u65b9\u5f0f\uff0c\u662f\u5782\u76f4\u62c9\u4f38\u663e\u793a\uff0c\u8fd8\u662f\u4e0a\u4e2d\u4e0b\u5bf9\u9f50\uff0c\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>.container {\r\n    align-items: stretch | start | end | center;\r\n}<\/pre>\n<p>\u5176\u4e2d\uff08\u5047\u8bbe\u6587\u6863\u6d41\u65b9\u5411\u4e3a\u7f51\u9875\u9ed8\u8ba4\uff09\uff1a<\/p>\n<dl class=\"grid-dl\">\n<dt>stretch<\/dt>\n<dd>\u9ed8\u8ba4\u503c\uff0c\u62c9\u4f38\u3002\u8868\u73b0\u4e3a\u5782\u76f4\u586b\u5145\u3002<\/dd>\n<dt>start<\/dt>\n<dd>\u8868\u73b0\u4e3a\u7f51\u683c\u5782\u76f4\u5c3a\u5bf8\u6536\u7f29\u4e3a\u5185\u5bb9\u5927\u5c0f\uff0c\u540c\u65f6\u6cbf\u7740\u4e0a\u7f51\u683c\u7ebf\u5bf9\u9f50\u663e\u793a\u3002<\/dd>\n<dt>end<\/dt>\n<dd>\u8868\u73b0\u4e3a\u7f51\u683c\u5782\u76f4\u5c3a\u5bf8\u6536\u7f29\u4e3a\u5185\u5bb9\u5927\u5c0f\uff0c\u540c\u65f6\u6cbf\u7740\u4e0b\u7f51\u683c\u7ebf\u5bf9\u9f50\u663e\u793a\u3002<\/dd>\n<dt>center<\/dt>\n<dd>\u8868\u73b0\u4e3a\u7f51\u683c\u5782\u76f4\u5c3a\u5bf8\u6536\u7f29\u4e3a\u5185\u5bb9\u5927\u5c0f\uff0c\u540c\u65f6\u5728\u5f53\u524d\u7f51\u683c\u533a\u57df\u5185\u90e8\u5782\u76f4\u5c45\u4e2d\u5bf9\u9f50\u663e\u793a\u3002<\/dd>\n<\/dl>\n<p>\u5404\u4e2a\u5c5e\u6027\u503c\u5b9e\u65f6\u6548\u679c\u5982\u4e0b\uff08\u70b9\u51fb\u5355\u9009\u6846\u4f53\u9a8c\u4e0d\u540c\u5c5e\u6027\u503c\u5e03\u5c40\u6548\u679c\uff09\uff1a<\/p>\n<div class=\"grid-radio-x jsGridRadio\"><span class=\"check-group\"><input type=\"radio\" id=\"alignItems1\" name=\"alignItems\" value=\"stretch\" checked><label for=\"alignItems1\" class=\"ui-radio\"><\/label><label for=\"alignItems1\" class=\"mr20\">stretch<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"alignItems2\" name=\"alignItems\" value=\"start\"><label for=\"alignItems2\" class=\"ui-radio\"><\/label><label for=\"alignItems2\" class=\"mr20\">start<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"alignItems3\" name=\"alignItems\" value=\"end\"><label for=\"alignItems3\" class=\"ui-radio\"><\/label><label for=\"alignItems3\" class=\"mr20\">end<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"alignItems4\" name=\"alignItems\" value=\"center\"><label for=\"alignItems4\" class=\"ui-radio\"><\/label><label for=\"alignItems4\">center<\/label><\/span><\/div>\n<div class=\"grid grid-base-10\" id=\"alignItems\">\n<div data-index=\"1\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72471\" width=\"128\" height=\"86\" class=\"size-small\"><\/div>\n<div data-index=\"2\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm2.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm2.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72472\" width=\"96\" height=\"128\" class=\"size-small\"><\/div>\n<div data-index=\"3\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm3.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm3.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72473\" width=\"128\" height=\"96\" class=\"size-small\"><\/div>\n<div data-index=\"4\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm4.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm4.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72474\" width=\"128\" height=\"96\" class=\"size-small\"><\/div>\n<\/div>\n<h4 id=\"place-items\">8. place-items<\/h4>\n<p><code>place-items<\/code>\u53ef\u4ee5\u8ba9<code>align-items<\/code>\u548c<code>justify-items<\/code>\u5c5e\u6027\u5199\u5728\u5355\u4e2a\u58f0\u660e\u4e2d\u3002\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>.container {\r\n    place-items: &lt;align-items&gt; &lt;justify-items&gt;?;\r\n}<\/pre>\n<p>\u8fd9\u91cc\u987a\u5e8f\u662f<code>align-items<\/code>\u5728\u524d\uff0c<code>justify-items<\/code>\u5728\u540e\u3002\u9996\u5b57\u6bcda,j\uff0ca,j\uff0ca,j\uff0c\u53e3\u4e2d\u4e0d\u65ad\u91cd\u590d\uff0c\u6709\u6ca1\u6709\u53d1\u73b0\u8ddfangelababy\u53d1\u97f3\u5f88\u50cf\uff0c\u6ca1\u9519\uff0c\u8bb0\u4f4fangelababy\u6211\u4eec\u4e5f\u5c31\u8bb0\u4f4f\u8fd9\u91cc\u7684\u987a\u5e8f\u4e86\u3002\u53c8\u6216\u8005\u6709\u53e5\u53e4\u8bdd\uff0c\u53eb\u505a\u201c\u5408\u7eb5\u8fde\u6a2a\u201d\uff0c\u8fd9\u79cd\u7f51\u683c\u5bf9\u9f50\uff0c\u5c31\u6709\u201c\u5408\u7eb5\u8fde\u6a2a\u201d\u7684\u610f\u5473\u5728\u91cc\u9762\uff0c\u7eb5\u5728\u524d\uff0c\u6a2a\u5728\u540e\uff0c\u4e5f\u53ef\u4ee5\u65b9\u4fbf\u6211\u4eec\u8bb0\u5fc6\u3002<\/p>\n<p>\u636e\u8bf4Edge15\u4e4b\u524d\u7248\u672c\u4e0d\u652f\u6301<code>place-items<\/code>\u5c5e\u6027\uff08\u81ea\u5df1\u672a\u5b9e\u6d4b\uff09\uff0c\u56e0\u6b64\uff0c\u5982\u679c\u6709\u517c\u5bb9\u6027\u987e\u8651\uff0c\u5efa\u8bae\u8fd8\u662f\u5206\u5f00\u4e66\u5199\u3002<\/p>\n<h4 id=\"justify-content\">9. justify-content<\/h4>\n<p><code>justify-content<\/code>\u6307\u5b9a\u4e86\u7f51\u683c\u5143\u7d20\u7684\u6c34\u5e73\u5206\u5e03\u65b9\u5f0f\u3002\u6b64\u5c5e\u6027\u4ec5\u5728\u7f51\u683c\u603b\u5bbd\u5ea6\u5c0f\u4e8egrid\u5bb9\u5668\u5bbd\u5ea6\u65f6\u5019\u6709\u6548\u679c\u3002\u4f8b\u5982\uff0c\u6211\u4eec\u7f51\u683c\u8bbe\u5b9a\u7684\u90fd\u662f\u56fa\u5b9a\u7684\u5bbd\u5ea6\u503c\uff0c\u7ed3\u679c\u8fd8\u6709\u5269\u4f59\u7a7a\u95f4\u3002\u4f8b\u5982\uff1a<\/p>\n<pre>.container {\r\n    display: grid;\r\n    width: 300px;\r\n    grid-template: 100px 100px\/100px 100px;\r\n}<\/pre>\n<p>\u6b64\u65f6\uff0c\u6c34\u5e73\u548c\u5782\u76f4\u65b9\u5411\u90fd\u6709100px\u7684\u5269\u4f59\uff0c<code>justify-content<\/code>\u5c5e\u6027\u6b64\u65f6\u5c31\u6709\u7528\u6b66\u4e4b\u5730\u4e86\u3002<\/p>\n<p>\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>justify-content: stretch | start | end | center | space-between | space-around | space-evenly;<\/pre>\n<p>\u5176\u4e2d\uff1a<\/p>\n<dl class=\"grid-dl\">\n<dt>stretch <\/dt>\n<dd>\u9ed8\u8ba4\u503c\u3002\u62c9\u4f38\uff0c\u5bbd\u5ea6\u586b\u6ee1grid\u5bb9\u5668\uff0c\u62c9\u4f38\u6548\u679c\u9700\u8981\u7f51\u683c\u76ee\u6807\u5c3a\u5bf8\u8bbe\u4e3aauto\u65f6\u5019\u624d\u6709\u6548\uff0c\u5982\u679c\u5b9a\u6b7b\u4e86\u5bbd\u5ea6\uff0c\u5219\u65e0\u6cd5\u62c9\u4f38\u3002<\/dd>\n<dt>start<\/dt>\n<dd>\u9ed8\u8ba4\u503c\u3002\u903b\u8f91CSS\u5c5e\u6027\u503c\uff0c\u4e0e\u6587\u6863\u6d41\u65b9\u5411\u76f8\u5173\u3002\u9ed8\u8ba4\u8868\u73b0\u4e3a\u5de6\u5bf9\u9f50\u3002<\/dd>\n<dt>end<\/dt>\n<dd>\u903b\u8f91CSS\u5c5e\u6027\u503c\uff0c\u4e0e\u6587\u6863\u6d41\u65b9\u5411\u76f8\u5173\u3002\u9ed8\u8ba4\u8868\u73b0\u4e3a\u53f3\u5bf9\u9f50\u3002<\/dd>\n<dt>center<\/dt>\n<dd>\u8868\u73b0\u4e3a\u5c45\u4e2d\u5bf9\u9f50\u3002<\/dd>\n<dt>space-between<\/dt>\n<dd>\u8868\u73b0\u4e3a\u4e24\u7aef\u5bf9\u9f50\u3002between\u662f\u4e2d\u95f4\u7684\u610f\u601d\uff0c\u610f\u601d\u662f\u591a\u4f59\u7684\u7a7a\u767d\u95f4\u8ddd\u53ea\u5728\u5143\u7d20\u4e2d\u95f4\u533a\u57df\u5206\u914d\u3002\u4f7f\u7528\u62bd\u8c61\u56fe\u5f62\u793a\u610f\u5982\u4e0b\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/201810\/space-between.svg\" width=\"320\" height=\"72\" alt=\"space-between\u5206\u5e03\u6548\u679c\u793a\u610f\"><\/p>\n<\/dd>\n<dt>space-around<\/dt>\n<dd>around\u662f\u73af\u7ed5\u7684\u610f\u601d\uff0c\u610f\u601d\u662f\u6bcf\u4e2agrid\u5b50\u9879\u4e24\u4fa7\u90fd\u73af\u7ed5\u4e92\u4e0d\u5e72\u6270\u7684\u7b49\u5bbd\u7684\u7a7a\u767d\u95f4\u8ddd\uff0c\u6700\u7ec8\u89c6\u89c9\u4e0a\u8fb9\u7f18\u4e24\u4fa7\u7684\u7a7a\u767d\u53ea\u6709\u4e2d\u95f4\u7a7a\u767d\u5bbd\u5ea6\u4e00\u534a\u3002\u4f7f\u7528\u62bd\u8c61\u56fe\u5f62\u793a\u610f\u5982\u4e0b\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/201810\/space-around.svg\" width=\"320\" height=\"65\" alt=\"space-around\u5206\u5e03\u6548\u679c\u793a\u610f\"><\/p>\n<\/dd>\n<dt>space-evenly<\/dt>\n<dd>evenly\u662f\u5300\u79f0\u3001\u5e73\u7b49\u7684\u610f\u601d\u3002\u4e5f\u5c31\u662f\u89c6\u89c9\u4e0a\uff0c\u6bcf\u4e2agrid\u5b50\u9879\u4e24\u4fa7\u7a7a\u767d\u95f4\u8ddd\u5b8c\u5168\u76f8\u7b49\u3002\u4f7f\u7528\u62bd\u8c61\u56fe\u5f62\u793a\u610f\u5982\u4e0b\uff1a<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/image.zhangxinxu.com\/image\/blog\/201810\/space-evenly.svg\" width=\"320\" height=\"65\" alt=\"space-evenly\u5206\u5e03\u6548\u679c\u793a\u610f\"><\/p>\n<\/dd>\n<\/dl>\n<p>\u773c\u89c1\u4e3a\u5b9e\uff0c\u70b9\u51fb\u4e0b\u9762\u5bf9\u5e94\u5355\u590d\u9009\u6846\uff0c\u53ef\u4ee5\u770b\u5230\u5b9e\u65f6\u7684\u5e03\u5c40\u6548\u679c\uff1a<\/p>\n<div class=\"grid-radio-x jsGridRadio\"><span class=\"check-group\"><input type=\"radio\" id=\"justifyContent0\" name=\"justifyContent\" value=\"stretch\" checked><label for=\"justifyContent0\" class=\"ui-radio\"><\/label><label for=\"justifyContent0\" class=\"mr20\">stretch<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"justifyContent1\" name=\"justifyContent\" value=\"start\"><label for=\"justifyContent1\" class=\"ui-radio\"><\/label><label for=\"justifyContent1\" class=\"mr20\">start<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"justifyContent2\" name=\"justifyContent\" value=\"end\"><label for=\"justifyContent2\" class=\"ui-radio\"><\/label><label for=\"justifyContent2\" class=\"mr20\">end<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"justifyContent3\" name=\"justifyContent\" value=\"center\"><label for=\"justifyContent3\" class=\"ui-radio\"><\/label><label for=\"justifyContent3\" class=\"mr20\">center<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"justifyContent4\" name=\"justifyContent\" value=\"space-between\"><label for=\"justifyContent4\" class=\"ui-radio\"><\/label><label for=\"justifyContent4\" class=\"mr20\">space-between<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"justifyContent5\" name=\"justifyContent\" value=\"space-around\"><label for=\"justifyContent5\" class=\"ui-radio\"><\/label><label for=\"justifyContent5\" class=\"mr20\">space-around<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"justifyContent6\" name=\"justifyContent\" value=\"space-evenly\"><label for=\"justifyContent6\" class=\"ui-radio\"><\/label><label for=\"justifyContent6\">space-evenly<\/label><\/span><\/div>\n<div class=\"grid grid-base-11\" id=\"justifyContent\">\n<div data-index=\"1\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72471\" width=\"128\" height=\"86\" class=\"size-small\" class=\"size-small\"><\/div>\n<div data-index=\"2\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm2.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm2.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72472\" width=\"96\" height=\"128\" class=\"size-small\"><\/div>\n<div data-index=\"3\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm3.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm3.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72473\" width=\"128\" height=\"96\" class=\"size-small\"><\/div>\n<div data-index=\"4\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm4.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm4.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72474\" width=\"128\" height=\"96\" class=\"size-small\"><\/div>\n<\/div>\n<p>\u4e0a\u9762\u6848\u4f8b\u548c\u4e0b\u9762\u6848\u4f8b\u4e2d\u7684grid\u5e03\u5c40\u76f8\u5173CSS\u90fd\u662f\uff1a<\/p>\n<pre>.container {\r\n    grid-template: auto auto\/auto auto;\r\n}<\/pre>\n<h4 id=\"align-content\">10. align-content<\/h4>\n<p><code>align-content<\/code>\u53ef\u4ee5\u770b\u6210\u548c<code>justify-content<\/code>\u662f\u76f8\u4f3c\u4e14\u5bf9\u7acb\u7684\u5c5e\u6027\uff0c<code>justify-content<\/code>\u6307\u660e\u6c34\u5e73\u65b9\u5411grid\u5b50\u9879\u7684\u5206\u5e03\u65b9\u5f0f\uff0c\u800c<code>align-content<\/code>\u5219\u662f\u6307\u660e\u5782\u76f4\u65b9\u5411\u6bcf\u4e00\u884cgrid\u5143\u7d20\u7684\u5206\u5e03\u65b9\u5f0f\u3002\u5982\u679c\u6240\u6709grid\u5b50\u9879\u53ea\u6709\u4e00\u884c\uff0c\u5219<code>align-content<\/code>\u5c5e\u6027\u662f\u6ca1\u6709\u4efb\u4f55\u6548\u679c\u7684\u3002<\/p>\n<p>\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>align-content: stretch | start | end | center | space-between | space-around | space-evenly;<\/pre>\n<p>\u5176\u4e2d\uff1a<\/p>\n<dl class=\"grid-dl\">\n<dt>stretch<\/dt>\n<dd>\u9ed8\u8ba4\u503c\u3002\u6bcf\u4e00\u884cgrid\u5b50\u5143\u7d20\u90fd\u7b49\u6bd4\u4f8b\u62c9\u4f38\u3002\u4f8b\u5982\uff0c\u5982\u679c\u5171\u4e24\u884cgrid\u5b50\u5143\u7d20\uff0c\u5219\u6bcf\u4e00\u884c\u62c9\u4f38\u9ad8\u5ea6\u662f50%\u3002<\/dd>\n<dt>start<\/dt>\n<dd>\u903b\u8f91CSS\u5c5e\u6027\u503c\uff0c\u4e0e\u6587\u6863\u6d41\u65b9\u5411\u76f8\u5173\u3002\u9ed8\u8ba4\u8868\u73b0\u4e3a\u9876\u90e8\u5806\u780c\u3002<\/dd>\n<dt>end<\/dt>\n<dd>\u903b\u8f91CSS\u5c5e\u6027\u503c\uff0c\u4e0e\u6587\u6863\u6d41\u65b9\u5411\u76f8\u5173\u3002\u9ed8\u8ba4\u8868\u73b0\u4e3a\u5e95\u90e8\u5806\u653e\u3002<\/dd>\n<dt>center<\/dt>\n<dd>\u8868\u73b0\u4e3a\u6574\u4f53\u5782\u76f4\u5c45\u4e2d\u5bf9\u9f50\u3002<\/dd>\n<dt>space-between<\/dt>\n<dd>\u8868\u73b0\u4e3a\u4e0a\u4e0b\u4e24\u884c\u4e24\u7aef\u5bf9\u9f50\u3002\u5269\u4e0b\u6bcf\u4e00\u884c\u5143\u7d20\u7b49\u5206\u5269\u4f59\u7a7a\u95f4\u3002<\/dd>\n<dt>space-around<\/dt>\n<dd>\u6bcf\u4e00\u884c\u5143\u7d20\u4e0a\u4e0b\u90fd\u4eab\u6709\u72ec\u7acb\u4e0d\u91cd\u53e0\u7684\u7a7a\u767d\u7a7a\u95f4\u3002<\/dd>\n<dt>space-evenly<\/dt>\n<dd>\u6bcf\u4e00\u884c\u5143\u7d20\u90fd\u5b8c\u5168\u4e0a\u4e0b\u7b49\u5206\u3002<\/dd>\n<\/dl>\n<p>\u773c\u89c1\u4e3a\u5b9e\uff0c\u6211\u4eec\u7ed9grid\u5bb9\u5668\u8bbe\u7f6e\u9ad8\u5ea6500\u50cf\u7d20\uff0c\u7136\u540e\u70b9\u51fb\u4e0b\u9762\u5bf9\u5e94\u5355\u9009\u6846\uff0c\u53ef\u4ee5\u770b\u5230\u5b9e\u65f6\u7684\u5e03\u5c40\u6548\u679c\uff1a<\/p>\n<div class=\"grid-radio-x jsGridRadio\"><span class=\"check-group\"><input type=\"radio\" id=\"alignContent5\" name=\"alignContent\" value=\"stretch\" checked><label for=\"alignContent5\" class=\"ui-radio\"><\/label><label for=\"alignContent5\" class=\"mr20\">stretch<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"alignContent1\" name=\"alignContent\" value=\"start\"><label for=\"alignContent1\" class=\"ui-radio\"><\/label><label for=\"alignContent1\" class=\"mr20\">start<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"alignContent2\" name=\"alignContent\" value=\"end\"><label for=\"alignContent2\" class=\"ui-radio\"><\/label><label for=\"alignContent2\" class=\"mr20\">end<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"alignContent3\" name=\"alignContent\" value=\"center\"><label for=\"alignContent3\" class=\"ui-radio\"><\/label><label for=\"alignContent3\" class=\"mr20\">center<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"alignContent4\" name=\"alignContent\" value=\"space-between\"><label for=\"alignContent4\" class=\"ui-radio\"><\/label><label for=\"alignContent4\" class=\"mr20\">space-between<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"alignContent6\" name=\"alignContent\" value=\"space-around\"><label for=\"alignContent6\" class=\"ui-radio\"><\/label><label for=\"alignContent6\" class=\"mr20\">space-around<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"alignContent7\" name=\"alignContent\" value=\"space-evenly\"><label for=\"alignContent7\" class=\"ui-radio\"><\/label><label for=\"alignContent7\">space-evenly<\/label><\/span><\/div>\n<div class=\"grid grid-base-11\" id=\"alignContent\">\n<div data-index=\"1\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72471\" width=\"128\" height=\"86\" class=\"size-small\" class=\"size-small\"><\/div>\n<div data-index=\"2\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm2.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm2.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72472\" width=\"96\" height=\"128\" class=\"size-small\"><\/div>\n<div data-index=\"3\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm3.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm3.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72473\" width=\"128\" height=\"96\" class=\"size-small\"><\/div>\n<div data-index=\"4\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm4.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm4.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72474\" width=\"128\" height=\"96\" class=\"size-small\"><\/div>\n<\/div>\n<h4 id=\"place-content\">11. place-content<\/h4>\n<p><code>place-content<\/code>\u53ef\u4ee5\u8ba9<code>align-content<\/code>\u548c<code>justify-content<\/code>\u5c5e\u6027\u5199\u5728\u4e00\u4e2aCSS\u58f0\u660e\u4e2d\uff0c\u4e5f\u5c31\u662f\u4fd7\u79f0\u7684\u7f29\u5199\u3002\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>.container {\r\n    place-content: &lt;align-content&gt; &lt;justify-content&gt;?;\r\n}<\/pre>\n<p>\u8fd9\u91cc\u987a\u5e8f\u662f<code>align-content<\/code>\u5728\u524d\uff0c<code>justify-content<\/code>\u5728\u540e\u3002\u9996\u5b57\u6bcda,j\uff0ca,j\uff0c\u8bfb\u4e2a\u51e0\u904d\uff0c\u662f\u4e0d\u662f\u548cangelababy\u53d1\u97f3\u4e00\u81f4\uff0c\u8bb0\u4f4fangelababy\u5c31\u8bb0\u4f4f\u8fd9\u91cc\u7684\u987a\u5e8f\u4e86\u3002\u53c8\u6216\u8005\u6709\u53e5\u53e4\u8bdd\uff0c\u53eb\u505a\u201c\u5408\u7eb5\u8fde\u6a2a\u201d\uff0c\u8fd9\u79cd\u7f51\u683c\u5206\u5e03\uff0c\u5c31\u6709\u201c\u5408\u7eb5\u8fde\u6a2a\u201d\u7684\u610f\u5473\u5728\u91cc\u9762\uff0c\u7eb5\u5728\u524d\uff0c\u6a2a\u5728\u540e\uff0c\u4e5f\u53ef\u4ee5\u65b9\u4fbf\u6211\u4eec\u8bb0\u5fc6\u3002<\/p>\n<p>\u636e\u8bf4Edge15\u53ca\u5176\u4e4b\u524d\u7248\u672c\u5c1a\u4e0d\u652f\u6301<code>place-content<\/code>\u5c5e\u6027\uff08\u81ea\u5df1\u672a\u5b9e\u6d4b\uff09\uff0c\u56e0\u6b64\uff0c\u5982\u679c\u6709\u517c\u5bb9\u6027\u987e\u8651\uff0c\u5efa\u8bae\u8fd8\u662f\u5206\u5f00\u4e66\u5199\u3002<\/p>\n<h4 id=\"grid-auto-columns-rows\">12. grid-auto-columns\u548cgrid-auto-rows<\/h4>\n<p>\u6307\u5b9a\u4efb\u4f55\u81ea\u52a8\u751f\u6210\u7684\u7f51\u683c\u8f68\u9053\uff08\u4e5f\u79f0\u4e3a\u9690\u5f0f\u7f51\u683c\u8f68\u9053\uff09\u7684\u5927\u5c0f\u3002 \u5f53\u7f51\u683c\u9879\u76ee\u591a\u4e8e\u7f51\u683c\u4e2d\u7684\u5355\u5143\u683c\u6216\u7f51\u683c\u9879\u76ee\u653e\u7f6e\u5728\u663e\u5f0f\u7f51\u683c\u4e4b\u5916\u65f6\uff0c\u5c06\u521b\u5efa\u9690\u5f0f\u8f68\u9053\u3002<\/p>\n<p>\u7528\u5f20\u8001\u677f\u627f\u5305\u571f\u5730\u7684\u6848\u4f8b\u89e3\u91ca\u5c31\u662f\uff1a<\/p>\n<ol>\n<li>\u571f\u5730\u5212\u5206\uff0c\u8ba1\u5212\u5206\u621016\u5757\u533a\u57df\u641e\u519c\u4e1a\uff0c\u6750\u6599\u90fd\u4e70\u597d\u4e86\uff0c\u7ed3\u679c\u53d1\u73b0\u627f\u5305\u7684\u571f\u5730\u53ea\u80fd\u653e\u4e0b12\u5757\u533a\u57df\uff0c\u591a\u76844\u5757\u600e\u4e48\u529e\u5462\uff1f\u5c31\u5728\u627f\u5305\u571f\u5730\u5916\u9762\u79cd\u70b9\u4e1c\u897f\uff0c\u4e0d\u8981\u6d6a\u8d39\u3002<\/li>\n<li>\u571f\u5730\u5212\u5206\uff0c\u8ba1\u5212\u4e0a\u9762\u79cd\u8461\u8404\uff0c\u5e95\u90e8\u79cd\u897f\u74dc\u3002\u4f46\u662f\uff0c\u79cd\u690d\u7684\u65f6\u5019\u641e\u9519\u4e86\uff0c\u897f\u74dc\u79cd\u5230\u4e86\u627f\u5305\u533a\u57df\u4e4b\u5916\u3002<\/li>\n<\/ol>\n<p>\u4e0a\u9762\u8fd9\u4e24\u79cd\u60c5\u51b5\u90fd\u662f\u56e0\u4e3a\u5404\u79cd\u539f\u56e0\u5728\u81ea\u5df1\u571f\u5730\u4e4b\u5916\u4e5f\u79cd\u4e86\u4e1c\u897f\u3002\u5982\u679c\u5f20\u8001\u677f\u60f3\u8981\u5bf9\u4e0d\u5728\u81ea\u5df1\u571f\u5730\u4e0a\u7684\u79cd\u690d\u533a\u57df\u4e5f\u8fdb\u884c\u5c3a\u5bf8\u89c4\u5212\uff0c\u8be5\u600e\u4e48\u529e\uff1f\u6b64\u65f6\u5c31\u9700\u8981\u7528\u5230<code>grid-auto-columns<\/code>\u548c<code>grid-auto-rows<\/code>\u5c5e\u6027\uff0c\u5c31\u662f\u5e94\u4ed8\u8fd9\u79cd\u573a\u666f\u7684\u3002<\/p>\n<p><span class=\"s\">\/\/zxx: \u5728Grid\u5e03\u5c40\u4e2d\uff0c\u8fd9\u4e9b\u975e\u6b63\u5e38\u7f51\u683c\u79f0\u4e3a\u201c\u9690\u5f0f\u7f51\u683c\u201d\uff0c\u5728\u89c4\u5b9a\u5bb9\u5668\u5185\u663e\u793a\u7684\u79f0\u4e4b\u4e3a\u201c\u663e\u5f0f\u7f51\u683c\u201d\u3002<\/span><\/p>\n<p>\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>.container {\r\n    grid-auto-columns: &lt;track-size&gt; ...;\r\n    grid-auto-rows: &lt;track-size&gt; ...;\r\n}<\/pre>\n<p>\u5176\u4e2d\uff1a<\/p>\n<dl class=\"grid-dl\">\n<dt>&lt;track-size&gt;<\/dt>\n<dd>\u5212\u5206\u7530\u5730\u7684\u5c3a\u5bf8\u3002\u53ef\u4ee5\u662f\u957f\u5ea6\u503c\uff0c\u767e\u5206\u6bd4\u503c\uff0c\u4ee5\u53ca<a href=\"#unit-fr\">fr\u5355\u4f4d<\/a>\uff08\u7f51\u683c\u5269\u4f59\u7a7a\u95f4\u6bd4\u4f8b\u5355\u4f4d\uff09\u3002<\/dd>\n<\/dl>\n<p>\u6211\u4eec\u901a\u8fc7\u4e00\u4e2a\u5b9e\u4f8b\u6765\u611f\u53d7\u4e0b<code>grid-auto-columns<\/code>\u548c<code>grid-auto-rows<\/code>\u5c5e\u6027\u7684\u6837\u5f0f\u8868\u73b0\u3002CSS\u5982\u4e0b\uff1a<\/p>\n<pre>.container {\r\n    display: grid;\r\n    width: 150px;\r\n    grid-template-columns: 60px 60px;\r\n    grid-template-rows: 30px 90px;\r\n    grid-auto-columns: 60px;\r\n}\r\n.item-a { \r\n    grid-column: 1 \/ 2;\r\n    grid-row: 2 \/ 3;\r\n}\r\n.item-b { \r\n    <span style=\"color: green;\">\/* \u5bb9\u5668\u6c34\u5e73\u53ea\u67092\u4e2a\u683c\u5b50\uff0c\u4f46\u8fd9\u91cc\u8bbe\u5b9a\u7684\u662f\u7b2c3\u4e2a\uff0c\u9690\u5f0f\u7f51\u683c\u521b\u5efa *\/<\/span>\r\n    grid-column: 3 \/ 4;\r\n    grid-row: 2 \/ 3; \r\n    background-color: rgba(255,255,0, .5);\r\n}<\/pre>\n<p>\u5b9e\u65f6\u6548\u679c\u5982\u4e0b\uff0c<code>.item-b<\/code>\u5bbd\u5ea6\u5f3a\u5236\u8868\u73b0\u4e3a\u4e86<code>60px<\/code>\uff0c\u5426\u5219\uff0c\u5219\u8868\u73b0\u4e3a<code>auto<\/code>\uff0c\u5728\u8fd9\u91cc\uff0c\u5219\u662f\u53ef\u601c\u5df4\u5df4\u586b\u6ee1\u5269\u4f59\u7684<code>30px<\/code>\uff1a<\/p>\n<div class=\"grid grid-base-12\">\n<div class=\"item-a\">\n<p class=\"grid-p\">.item-a<\/p>\n<\/div>\n<div class=\"item-b\">\n<p class=\"grid-p\">.item-b<\/p>\n<\/div>\n<\/div>\n<h4 id=\"grid-auto-flow\">13. grid-auto-flow<\/h4>\n<p><code>grid-auto-flow<\/code>\u5c5e\u6027\u63a7\u5236\u6ca1\u6709\u660e\u786e\u6307\u5b9a\u4f4d\u7f6e\u7684grid\u5b50\u9879\u7684\u653e\u7f6e\u65b9\u5f0f\u3002\u6bd4\u65b9\u8bf4\u5b9a\u4e49\u4e86\u4e00\u4e2a5*2\u768410\u683c\u5b50\uff0c\u5171\u67095\u4e2a\u5143\u7d20\uff0c\u5176\u4e2d2\u4e2a\u5143\u7d20\u6307\u5b9a\u4e86\u653e\u5728\u54ea\u4e2a\u683c\u5b50\u91cc\uff0c\u8fd8\u67093\u4e2a\u5219\u81ea\u751f\u81ea\u706d\u6392\u5217\u3002\u6b64\u65f6\uff0c\u8fd93\u4e2a\u5143\u7d20\u5982\u4f55\u6392\u5217\u5c31\u662f\u7531<code>grid-auto-flow<\/code>\u5c5e\u6027\u63a7\u5236\u7684\u3002<\/p>\n<p>\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>.container {\r\n  grid-auto-flow: row | column | row dense | column dense\r\n}<\/pre>\n<p>\u5176\u4e2d\uff1a<\/p>\n<dl class=\"grid-dl\">\n<dt>row<\/dt>\n<dd>\u9ed8\u8ba4\u503c\u3002\u6ca1\u6709\u6307\u5b9a\u4f4d\u7f6e\u7684\u7f51\u683c\u4f9d\u6b21\u6c34\u5e73\u6392\u5217\u4f18\u5148\u3002<\/dd>\n<dt>column<\/dt>\n<dd>\u6ca1\u6709\u6307\u5b9a\u4f4d\u7f6e\u7684\u7f51\u683c\u4f9d\u6b21\u5782\u76f4\u6392\u5217\u4f18\u5148\u3002<\/dd>\n<dt>dense<\/dt>\n<dd>dense\u8fd9\u4e2a\u82f1\u6587\u662f\u7a20\u5bc6\u7684\u610f\u601d\u3002\u5982\u679c\u6709\u8bbe\u7f6e\uff0c\u5219\u8868\u793a\u81ea\u52a8\u6392\u5217\u542f\u7528\u201c\u5bc6\u96c6\u201d\u6253\u5305\u7b97\u6cd5\u3002\u5982\u679c\u7a0d\u540e\u51fa\u73b0\u7684\u7f51\u683c\u6bd4\u8f83\u5c0f\uff0c\u5219\u5c1d\u8bd5\u770b\u770b\u524d\u9762\u6709\u6ca1\u6709\u5408\u9002\u7684\u5730\u65b9\u653e\u7f6e\uff0c\u4f7f\u7f51\u683c\u5c3d\u53ef\u80fd\u7a20\u5bc6\u7d27\u51d1\u3002\u6b64\u5c5e\u6027\u503c\u4ec5\u4ec5\u6539\u53d8\u89c6\u89c9\u987a\u5e8f\uff0c\u4f1a\u5bfc\u81f4DOM\u5c5e\u6027\u548c\u5b9e\u9645\u5448\u73b0\u987a\u5e8f\u4e0d\u7b26\u5408\uff0c\u8fd9\u5bf9\u4e8e\u53ef\u8bbf\u95ee\u6027\u662f\u4e0d\u53cb\u597d\u7684\uff0c\u5efa\u8bae\u8c28\u614e\u4f7f\u7528\u3002<\/dd>\n<\/dl>\n<p>\u5b9e\u4f8b\u8bf4\u8bdd\uff0c\u5df2\u77e5CSS\u5982\u4e0b\uff1a<\/p>\n<pre>.container{grid-template: 1fr 1fr 1fr\/1fr 2fr 2fr 1fr 2fr;}\r\n.item-a { grid-column: 1; grid-row: 2 \/ 4; }\r\n.item-b { grid-row: 1 \/ 3; }\r\n.item-c {}\r\n.item-d {}\r\n.item-e {}<\/pre>\n<p>\u4e5f\u5c31\u662f<code>.item-a<\/code\uff0c<code>.item-b<\/code>\u6c34\u5e73\u4f4d\u7f6e\u56fa\u5b9a\uff0c\u70b9\u51fb\u4e0b\u9762\u5355\u9009\u9879\uff0c\u4f53\u9a8c\u5e03\u5c40\u53d8\u5316\u3002<\/p>\n<div class=\"grid-radio-x jsGridRadio\"><span class=\"check-group\"><input type=\"radio\" id=\"autoFlow1\" name=\"gridAutoFlow\" value=\"row\" checked><label for=\"autoFlow1\" class=\"ui-radio\"><\/label><label for=\"autoFlow1\" class=\"mr20\">row<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"autoFlow2\" name=\"gridAutoFlow\" value=\"column\"><label for=\"autoFlow2\" class=\"ui-radio\"><\/label><label for=\"autoFlow2\" class=\"mr20\">column<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"autoFlow3\" name=\"gridAutoFlow\" value=\"row dense\"><label for=\"autoFlow3\" class=\"ui-radio\"><\/label><label for=\"autoFlow3\" class=\"mr20\">row dense<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"autoFlow4\" name=\"gridAutoFlow\" value=\"column dense\"><label for=\"autoFlow4\" class=\"ui-radio\"><\/label><label for=\"autoFlow4\">column dense<\/label><\/span><\/div>\n<div id=\"gridAutoFlow\" class=\"grid grid-base-13\">\n<div class=\"item-a\">\n<p class=\"grid-p\">.item-a<\/p>\n<\/div>\n<div class=\"item-b\">\n<p class=\"grid-p\">.item-b<\/p>\n<\/div>\n<div class=\"item-c\">\n<p class=\"grid-p\">.item-c<\/p>\n<\/div>\n<div class=\"item-d\">\n<p class=\"grid-p\">.item-d<\/p>\n<\/div>\n<div class=\"item-e\">\n<p class=\"grid-p\">.item-e<\/p>\n<\/div>\n<\/div>\n<ul>\n<li>\u9009\u4e2d<code>row<\/code>\uff0c\u6c34\u5e73\u6392\u5217\uff0c\u6b64\u65f6<code>.item-c<\/code>\u9ad8\u5ea6\u8db3\u591f\u653e\u5728\u5de6\u4e0a\u89d2\u90a3\u4e2a\u7f51\u683c\u4e2d\uff0c\u56e0\u6b64\uff0c\u89c6\u89c9\u987a\u5e8f\u662fc, b, d, e\u3002<\/li>\n<li>\u9009\u4e2d<code>column<\/code>\uff0c\u5782\u76f4\u6392\u5217\uff0c\u6b64\u65f6<code>.item-c<\/code>\u5bbd\u5ea6\u4e0d\u8db3\u591f\u653e\u5728\u5de6\u4e0a\u89d2\u90a3\u4e2a\u7f51\u683c\u4e2d\uff0c\u56e0\u6b64\uff0c\u89c6\u89c9\u987a\u5e8f\uff08\u5148\u4e0a\u4e0b\u540e\u5de6\u53f3\uff09\u662fb, c, d, e\u3002<\/li>\n<li>\u9009\u4e2d<code>row dense<\/code>\uff0c\u6c34\u5e73\u6392\u5217\uff0c\u540c\u65f6\u524d\u9762\u6709\u7a7a\u5c31\u94bb\u3002\u89c6\u89c9\u987a\u5e8f\u540c<code>row<\/code>\u5c5e\u6027\u3002<\/li>\n<li>\u9009\u4e2d<code>column dense<\/code>\uff0c\u5782\u76f4\u6392\u5217\uff0c\u6b64\u65f6<code>.item-c<\/code>\u653e\u7f6e\u5728\u5de6\u4e0a\u89d2\u90a3\u4e2a\u7f51\u683c\u4e2d\uff0c\u56e0\u6b64\uff0c\u89c6\u89c9\u987a\u5e8f\uff08\u5148\u4e0a\u4e0b\u540e\u5de6\u53f3\uff09\u662fc, b, d, e\uff0cb\u548cd\u5782\u76f4\u6392\u5217\u3002<\/li>\n<\/ul>\n<h4 id=\"grid-grid\">14. grid<\/h4>\n<p>\u662f\u4e0b\u9762\u6240\u6709\u8fd9\u4e9bCSS\u5c5e\u6027\u7684\u7f29\u5199\u96c6\u5408\uff0c<a href=\"#grid-template-columns-rows\"><code>grid-template-rows<\/code><\/a>\uff0c<a href=\"#grid-template-columns-rows\"><code>grid-template-columns<\/code><\/a>\uff0c<a href=\"#grid-template-areas\"><code>grid-template-areas<\/code><\/a>\uff0c<a href=\"#grid-auto-columns-rows\"><code>grid-auto-rows<\/code><\/a>\uff0c<a href=\"#grid-auto-columns-rows\"><code>grid-auto-columns<\/code><\/a>\u548c<a href=\"#grid-auto-flow\"><code>grid-auto-flow<\/code><\/a>\u3002<\/p>\n<p>\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<ul>\n<li>\n<pre>grid: none<\/pre>\n<p><code>none<\/code>\u8868\u793a\u8bbe\u7f6e\u6240\u6709\u7684\u5b50\u5c5e\u6027\u4e3a\u521d\u59cb\u503c\u3002<\/p>\n<\/li>\n<li>\n<pre>grid: &lt;grid-template&gt;<\/pre>\n<p>\u548c<a href=\"#grid-template\"><code>grid-template<\/code><\/a>\u7528\u6cd5\u4e00\u81f4\u3002\u4f8b\u5982\u8fd9\u6837\uff1a<\/p>\n<pre>.container {\r\n    grid: 100px 300px \/ 3fr 1fr;\r\n}<\/pre>\n<p>\u7b49\u540c\u4e8e\u4e0b\u9762\uff1a<\/p>\n<pre>.container {\r\n    grid-template-rows: 100px 300px;\r\n    grid-template-columns: 3fr 1fr;\r\n}<\/pre>\n<\/li>\n<li>\n<pre>grid: &lt;grid-template-rows&gt; \/ [ auto-flow &amp;&amp; dense? ] &lt;grid-auto-columns&gt;? <\/pre>\n<p>\u95ee\u53f7<code>?<\/code>\u8868\u793a0\u62161\uff0c\u53ef\u6709\u53ef\u65e0\u7684\u610f\u601d\u3002\u4e5f\u5c31\u662f<code>dense<\/code>\u5173\u952e\u5b57\u548c<code>grid-auto-columns<\/code>\u503c\u90fd\u53ef\u4ee5\u7701\u7565\u3002<\/p>\n<p><strong>\u5177\u4f53\u8bf4\u660e\uff1a<\/strong><\/p>\n<ul>\n<li>\n<p><code>auto-flow &amp;&amp; dense?<\/code>\u5176\u5b9e\u5c31\u662f<code>grid-auto-flow<\/code>\u5c5e\u6027\u7684\u503c\uff0c\u7b49\u540c\u4e8e<code>row<\/code>\u6216<code>column<\/code>\u6216<code>row dense<\/code>\u6216<code>column dense<\/code>\u3002<\/p>\n<p>\u4f46\u8fd9\u91cc<code>row<\/code>\u548c<code>column<\/code>\u8fd9\u4e24\u4e2a\u5173\u952e\u5b57\u5374\u4f7f\u7528\u4e86<code>auto-flow<\/code>\u8fd9\u4e00\u4e2a\u5173\u952e\u5b57\u4ee3\u66ff\u4e86\u3002\u90a3\u5c82\u4e0d\u6709\u95ee\u9898\uff1a\u4ec0\u4e48\u65f6\u5019\u89e3\u6790\u6210<code>row<\/code>\uff0c\u4ec0\u4e48\u65f6\u5019\u89e3\u6790\u6210<code>column<\/code>\u5462\uff1f<\/p>\n<p>\u539f\u6765\uff0c\u662f\u6839\u636e<code>auto-flow<\/code>\u5173\u952e\u5b57\u662f\u5728\u659c\u6760\u7684\u5de6\u4fa7\u8fd8\u662f\u53f3\u4fa7\u51b3\u5b9a\u7684\u3002\u5982\u679c<code>auto-flow<\/code>\u5173\u952e\u5b57\u5728\u659c\u6760\u5de6\u4fa7\uff0c\u5219\u89e3\u6790\u4e3a<code>row<\/code>\uff0c\u5982\u679c\u662f\u5728\u53f3\u4fa7\uff0c\u5219\u89e3\u6790\u4e3a<code>column<\/code>\u3002\u8fd9\u91cc\u7684\u8bed\u6cd5\u662f\u5728\u659c\u6760\u7684\u53f3\u4fa7\uff0c\u56e0\u6b64\uff0c\u4f1a\u5c06<code>grid-auto-flow<\/code>\u89e3\u6790\u4e3a<code>column<\/code>\u3002<\/p>\n<\/li>\n<li>\n<p><code>&lt;grid-auto-columns&gt;<\/code>\u540e\u9762\u6709\u4e2a\u95ee\u53f7<code>?<\/code>\uff0c\u56e0\u6b64\u662f\u53ef\u4ee5\u7701\u7565\u7684\uff0c\u5982\u679c\u7701\u7565\uff0c\u5219\u5c06<code>grid-auto-columns<\/code>\u89e3\u6790\u4e3a<code>auto<\/code>\u3002<\/p>\n<\/li>\n<\/ul>\n<p>\u6211\u4eec\u901a\u8fc7\u51e0\u4e2a\u6848\u4f8b\u5b66\u4e60\u8fd9\u91cc\u7684\u8bed\u6cd5\uff1a<\/p>\n<pre>.container {\r\n    grid: 100px 300px \/ auto-flow 200px;\r\n}<\/pre>\n<p>\u4e0a\u9762CSS\u4ee3\u7801\u7701\u7565\u4e86<code>dense<\/code>\u5173\u952e\u5b57\uff0c\u542f\u7528\u4e86<code>&lt;grid-auto-columns&gt;<\/code>\uff0c\u56e0\u6b64\uff0c\u7b49\u540c\u4e8e\u4e0b\u9762CSS\uff1a<\/p>\n<pre>.container {\r\n    grid-template-rows: 100px 300px;\r\n    grid-auto-flow: column;\r\n    grid-auto-columns: 200px;\r\n}<\/pre>\n<p>\u8bb0\u4f4f\uff0c\u5728Grid\u5e03\u5c40\u4e2d\uff0c\u659c\u6760\u524d\u9762\u90fd\u662frows\u76f8\u5173\u5c5e\u6027\uff0c\u659c\u6760\u540e\u9762\u90fd\u662fcolumns\u76f8\u5173\u5c5e\u6027\uff08\u4e0b\u540c\uff09\u3002<\/p>\n<\/li>\n<li>\n<pre>grid: [ auto-flow &amp;&amp; dense? ] &lt;grid-auto-rows&gt;? \/ &lt;grid-template-columns&gt;<\/pre>\n<p>\u6b64\u8bed\u6cd5\u548c\u4e0a\u9762\u4e00\u4e2a\u8bed\u6cd5\u7c7b\u4f3c\uff0c\u53ea\u662f\u8fd9\u4e2a\u659c\u6760\u524d\u9762\u662f\u9690\u5f0f\u7f51\u683c\uff0c\u540e\u9762\u662f\u663e\u793a\u3002\u5728\u8fd9\u91cc\uff0c\u7531\u4e8e<code>auto-flow<\/code>\u5728\u659c\u6760\u5de6\u4fa7\uff0c\u56e0\u6b64\u89e3\u6790\u4e3a<code>row<\/code>\u3002\u6240\u4ee5\uff1a<\/p>\n<pre>.container {\r\n    grid: auto-flow dense 100px \/ 1fr 2fr;\r\n}<\/pre>\n<p>\u5c31\u7b49\u540c\u4e8e\u4e0b\u9762CSS\uff1a<\/p>\n<pre>.container {\r\n    grid-auto-flow: row dense;\r\n    grid-auto-rows: 100px;\r\n    grid-template-columns: 1fr 2fr;\r\n}<\/pre>\n<\/li>\n<\/ul>\n<p>grid\u5c5e\u6027\u7f29\u5199\u8bed\u6cd5\u7b2c\u4e00\u6b21\u5b66\u4e60\u4f1a\u6709\u4e9b\u61f5\u903c\uff0c\u4e4d\u4e00\u770b\uff0c\u5934\u90fd\u5927\u4e86\uff0c\u5404\u79cd\u975e\u5b57\u6bcd\u4ee5\u5916\u7684\u7b26\u53f7\uff0c\u5929\u4e66\u4e00\u6837\u3002\u5176\u5b9e<code>&amp;<\/code>\uff0c<code>[<\/code>\uff0c<code>]<\/code>\uff0c<code>?<\/code>\u8fd9\u4e9b\u7b26\u53f7\u5b9e\u9645\u4e66\u5199\u90fd\u4e0d\u53c2\u4e0e\u7684\uff0c\u4ec5\u4ec5\u7528\u6765\u8868\u793a\u903b\u8f91\u3002<\/p>\n<p>\u597d\u5427\uff0c\u9001\u4f5b\u9001\u5230\u897f\uff0c\u6211\u6700\u540e\u518d\u7ed9\u5927\u5bb6\u68b3\u7406\u4e0b\uff1a<\/p>\n<ul>\n<li><code>grid:none<\/code>\u597d\u7b80\u5355\u597d\u8212\u723d\uff0c\u6ca1\u4ec0\u4e48\u597d\u8bf4\u7684\u3002<\/li>\n<li>\u5982\u679c\u7f51\u683c\u5e03\u5c40\u4e2d\u89c4\u4e2d\u77e9\uff0c\u6ca1\u6709\u54ea\u4e2a\u683c\u5b50\u8dd1\u5230grid\u5bb9\u5668\u5916\u9762\uff0c\u5c31\u662f<code>grid-template<\/code>\u5c5e\u6027\u3002<\/li>\n<li>\u6700\u540e\u4e24\u4e2a\u8bed\u6cd5\u5b8c\u5168\u662f\u51fa\u73b0\u4e86grid\u5bb9\u5668\u5916\u9762\u683c\u5b50\u65f6\u5019\u624d\u4f7f\u7528\u7684\uff0c\u8981\u4e48<code>grid-template\/auto-flow<\/code>\uff0c\u8981\u4e48<code>auto-flow\/grid-template<\/code>\uff0c\u5c31\u8fd9\u4e48\u7b80\u5355\u3002<\/li>\n<\/ul>\n<p>\u8bf4\u7a7f\u4e86\uff0c\u5176\u5b9e\u4e5f\u6ca1\u5565\uff0c\u4e00\u5f00\u59cb\u4f7f\u7528\u4e0d\u719f\u7ec3\u662f\u5f88\u6b63\u5e38\u7684\uff0c\u4f60\u591a\u5b9e\u8df5\u51e0\u6b21\uff0c\u591a\u624b\u5199\u51e0\u6b21\uff0c\u5f88\u5feb\u5c31\u80fd\u638c\u63e1\uff0c\u6210\u4e3aGrid\u5e03\u5c40\u5c0f\u80fd\u624b\u4e86\u3002<\/p>\n<h3>\u4e09\u3001\u4f5c\u7528\u5728grid\u5b50\u9879\u4e0a\u7684CSS\u5c5e\u6027<\/h3>\n<h4 id=\"grid-column-row-se\">1. grid-column-start, grid-column-end, grid-row-start\u548cgrid-row-end<\/h4>\n<p>\u8868\u793agrid\u5b50\u9879\u6240\u5360\u636e\u7684\u533a\u57df\u7684\u8d77\u59cb\u548c\u7ec8\u6b62\u4f4d\u7f6e\uff0c\u5305\u62ec\u6c34\u5e73\u65b9\u5411\u548c\u5782\u76f4\u65b9\u5411\u3002<\/p>\n<p>\u5c31\u597d\u6bd4\u5f20\u8001\u677f\u517b\u9c7c\uff0c\u8fd9\u9c7c\u5858\u4e1c\u8fb9\u4ece\u4ec0\u4e48\u5730\u65b9\u5f00\u59cb\uff0c\u5f80\u897f\u5230\u4ec0\u4e48\u5730\u65b9\uff0c\u5357\u8fb9\u662f\u54ea\u91cc\uff0c\u5317\u9762\u53c8\u5230\u4f55\u5904\uff0c\u90fd\u8981\u8bf4\u6e05\u695a\uff0c\u8fd9\u6837\uff0c\u8fd9\u9c7c\u6c60\u7684\u9762\u79ef\u548c\u4f4d\u7f6e\u4e5f\u5c31\u51fa\u6765\u4e86\u3002<\/p>\n<p>\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>.item {\r\n    grid-column-start: &lt;number&gt; | &lt;name&gt; | span &lt;number&gt; | span &lt;name&gt; | auto\r\n    grid-column-end: &lt;number&gt; | &lt;name&gt; | span &lt;number&gt; | span &lt;name&gt; | auto\r\n    grid-row-start: &lt;number&gt; | &lt;name&gt; | span &lt;number&gt; | span &lt;name&gt; | auto\r\n    grid-row-end: &lt;number&gt; | &lt;name&gt; | span &lt;number&gt; | span &lt;name&gt; | auto\r\n}<\/pre>\n<p>\u8bed\u6cd5\u4e2d\u7684\u7ba1\u9053\u5206\u9694\u7b26<code>|<\/code>\u8868\u793a\u201c\u6216\u8005\u201d\u7684\u610f\u601d\uff0c\u6240\u4ee5\u522b\u770b\u4e0a\u9762\u597d\u957f\uff0c\u5b9e\u9645\u4e0a\u5c31\u4e00\u4e2a\u5c5e\u6027\u503c\uff0c\u5177\u4f53\u6765\u8bb2\uff1a<\/p>\n<dl class=\"grid-dl\">\n<dt>&lt;number&gt;<\/dt>\n<dd>\u8d77\u6b62\u4e0e\u7b2c\u51e0\u6761\u7f51\u683c\u7ebf\u3002<\/dd>\n<dt>&lt;name&gt;<\/dt>\n<dd>\u81ea\u5b9a\u4e49\u7684\u7f51\u683c\u7ebf\u7684\u540d\u79f0\u3002<\/dd>\n<dt>span &lt;number&gt;<\/dt>\n<dd>\u8868\u793a\u5f53\u524d\u7f51\u683c\u4f1a\u81ea\u52a8\u8de8\u8d8a\u6307\u5b9a\u7684\u7f51\u683c\u6570\u91cf\u3002<\/dd>\n<dt>span &lt;name&gt;<\/dt>\n<dd>\u8868\u793a\u5f53\u524d\u7f51\u683c\u4f1a\u81ea\u52a8\u6269\u5c55\uff0c\u76f4\u5230\u547d\u4e2d\u6307\u5b9a\u7684\u7f51\u683c\u7ebf\u540d\u79f0\u3002<\/dd>\n<dt>auto<\/dt>\n<dd>\u5168\u81ea\u52a8\uff0c\u5305\u62ec\u5b9a\u4f4d\uff0c\u8de8\u5ea6\u7b49\u3002<\/dd>\n<\/dl>\n<p>\u770b\u4f8b\u5b50\u8bf4\u8bdd\uff0cCSS\u548cHTML\u5982\u4e0b\uff1a<\/p>\n<pre>.container {\r\n    grid-template-columns: [\u7b2c\u4e00\u6839\u7eb5\u7ebf] 80px [\u7eb5\u7ebf2] auto [\u7eb5\u7ebf3] 100px [\u6700\u540e\u7684\u7ed3\u675f\u7ebf];\r\n    grid-template-rows: [\u7b2c\u4e00\u884c\u5f00\u59cb] 25% [\u7b2c\u4e00\u884c\u7ed3\u675f] 100px [\u884c3] auto [\u884c\u672b];\r\n}\r\n.item-a {\r\n    grid-column-start: 2;\r\n    grid-column-end: \u7eb5\u7ebf3;\r\n    grid-row-start: \u7b2c\u4e00\u884c\u5f00\u59cb;\r\n    grid-row-end: 3;\r\n}<\/pre>\n<pre>&lt;div class=\"container\"&gt;\r\n    &lt;div class=\"item-a\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>\u5b9e\u65f6\u6548\u679c\u5982\u4e0b\uff1a<\/p>\n<div class=\"grid grid-base-14\">\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<\/div>\n<div class=\"grid-float\" style=\"position: relative;\">\n<div class=\"grid grid-base-14\">\n<div class=\"grid-number-name-1\">\n        <i class=\"grid-mark-line1\">number: 2<br \/>name: \u7eb5\u7ebf2<\/i><i class=\"grid-mark-line2\">number: 1&emsp;name: \u7b2c\u4e00\u884c\u5f00\u59cb<\/i><i class=\"grid-mark-line3\">number: 3<br \/>name: \u7eb5\u7ebf3<\/i><i class=\"grid-mark-line4\">number: 3&emsp;name: \u884c3<\/i><\/p>\n<p class=\"grid-p\"><strong>.item-a<\/strong><\/p>\n<\/p><\/div>\n<\/div>\n<\/div>\n<p>\u6bcf\u6839\u7f51\u683c\u7ebf\u90fd\u6709\u5185\u7f6e\u7684<code>&lt;number&gt;<\/code>\uff0c\u4ece1\u5f00\u59cb\u8ba1\u6570\uff0c\u4e0a\u9762Grid\u5e03\u5c40\u4e3a3&#215;3\u7684\u4e5d\u5bab\u683c\uff0c\u56e0\u6b64\uff0c\u6c34\u5e73\u548c\u5782\u76f4\u90fd\u662f4\u6761\u7f51\u683c\u7ebf\uff08\u542b\u8fb9\u7f18\uff09\uff0c\u4ece\u5de6\u5f80\u53f34\u6761\u7ebf<code>&lt;number&gt;<\/code>\u503c\u4f9d\u6b21\u662f<code>1-4<\/code>\uff0c\u5782\u76f4\u65b9\u5411\u4ece\u4e0a\u5f80\u4e0b\u4e5f\u662f\u7c7b\u4f3c\u3002<\/p>\n<p>\u518d\u672c\u4f8b\u4e2d\uff0c\u6240\u6709\u7f51\u683c\u7ebf\u90fd\u547d\u540d\u4e86\u4e2d\u6587\u540d\u79f0\uff0c\u4f8b\u5982\u201c\u7b2c\u4e00\u6839\u7eb5\u7ebf\u201d\uff0c\u5c31\u662f\u6700\u5de6\u8fb9\u7ad6\u76f4\u7f51\u683c\u7ebf\u3002\u56e0\u6b64\uff0c\u6700\u7ec8\u6548\u679c\u4e5f\u5c31\u4e0d\u96be\u7406\u89e3\u4e86\u2014\u2014<\/p>\n<p><code>grid-column-start:2<\/code>\u8868\u793a<code>.item-a<\/code>\u7f51\u683c\u5de6\u4fa7\u8d77\u59cb\u4e8e<code>&lt;number&gt;<\/code>\u4e3a<code>2<\/code>\u7684\u7ebf\uff1b<br \/><code>grid-column-end:\u7eb5\u7ebf3<\/code>\u8868\u793a<code>.item-a<\/code>\u7f51\u683c\u53f3\u4fa7\u7ed3\u675f\u4e8e<code>&lt;name&gt;<\/code>\u4e3a<code>\u7eb5\u7ebf3<\/code>\u7684\u7ebf\uff1b<br \/>\n<code>grid-row-start:\u7b2c\u4e00\u884c\u5f00\u59cb<\/code>\u8868\u793a<code>.item-a<\/code>\u7f51\u683c\u4e0a\u65b9\u5f00\u59cb\u4e8e<code>&lt;name&gt;<\/code>\u4e3a<code>\u7b2c\u4e00\u884c\u5f00\u59cb<\/code>\u7684\u7ebf\uff1b<br \/><code>grid-row-end:3<\/code>\u8868\u793a<code>.item-a<\/code>\u7f51\u683c\u4e0b\u65b9\u7ed3\u675f\u4e8e<code>&lt;number&gt;<\/code>\u4e3a<code>3<\/code>\u7684\u7ebf\u3002<\/p>\n<p><strong>span\u4f5c\u7528\u8868\u73b0<\/strong><\/p>\n<p>\u4e0b\u9762\u6211\u4eec\u518d\u6765\u770b\u4e0b<code>span<\/code>\u5173\u952e\u5b57\u7684\u4f5c\u7528\u3002\u5982\u4e0bCSS\u548cHTML\uff1a<\/p>\n<pre>.item-b {\r\n    grid-column-start: 2;\r\n    grid-column-end: span \u7eb5\u7ebf3;\r\n    grid-row-start: \u7b2c\u4e00\u884c\u5f00\u59cb;\r\n    grid-row-end: span 3;\r\n}<\/pre>\n<pre>&lt;div class=\"container\"&gt;\r\n    &lt;div class=\"item-b\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>\u6548\u679c\u4e3a\uff1a<\/p>\n<div class=\"grid grid-base-14\">\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<\/div>\n<div class=\"grid-float\" style=\"position: relative;\">\n<div class=\"grid grid-base-14\">\n<div class=\"grid-number-name-2\">\n        <i class=\"grid-mark-line1\">number: 2<br \/>name: \u7eb5\u7ebf2<\/i><i class=\"grid-mark-line2\">number: 1&emsp;name: \u7b2c\u4e00\u884c\u5f00\u59cb<\/i><i class=\"grid-mark-line3\">number: 3<br \/>name: \u7eb5\u7ebf3<\/i><i class=\"grid-mark-line4\">number: 3<\/i><i class=\"grid-mark-line5\">number: 4<\/i><\/p>\n<p class=\"grid-p\"><strong>.item-b<\/strong><\/p>\n<\/p><\/div>\n<\/div>\n<\/div>\n<p>\u5bf9\u4e8e\u547d\u540d\u7684\u7f51\u683c\u7ebf\uff0c\u6709<code>span<\/code>\u548c\u6ca1\u6709<code>span<\/code>\u6ca1\u6709\u533a\u522b\uff08\u5305\u62ec\u591a\u4e2a\u540c\u540d\u7f51\u683c\u7ebf\uff09\u3002<\/p>\n<p><strong>\u66f4\u65b0\u4e8e2020-05-30<\/strong><\/p>\n<p><code>span<\/code>\u662f\u4e2a\u6446\u8bbe\u4ec5\u9650\u4e8e\u7f51\u683c\u7ebf\u547d\u540d\u53ea\u67091\u4e2a\uff0c\u4e14\u5339\u914d\u7684\u573a\u666f\u3002\u5982\u679c\u591a\u4e2a\u5339\u914d\u7684\u7f51\u683c\u7ebf\u547d\u540d\uff0c\u6216\u8005\u6ca1\u6709\u5339\u914d\u7684\u7f51\u683c\u7ebf\u547d\u540d\uff0cspan\u5173\u952e\u5b57\u5c31\u4f1a\u6709\u660e\u663e\u7684\u4f5c\u7528\uff0c\u7bc7\u5e45\u539f\u56e0\u8fd9\u91cc\u5c31\u4e0d\u7ee7\u7eed\u5c55\u5f00\u4e86\u3002<\/p>\n<p><span class=\"s\">\/\/zxx: \u66f4\u65b0end<\/span><\/p>\n<p>\u4f46\u662f\uff0c\u5bf9\u4e8e\u6570\u503c\u7f51\u683c\u7ebf\uff0c\u5219\u53ef\u4ee5\u770b\u51fa\u5dee\u5f02\uff0c\u6709<code>span<\/code>\u5219\u8868\u793a\u8de8\u8d8a\u7684\u4e2a\u6570\uff0c\u800c\u975e\u7f51\u683c\u7ebf\u7684\u5e8f\u53f7\u3002\u4f8b\u5982\u8fd9\u91cc<code>grid-row-end:span 3<\/code>\u8868\u793a\u5f53\u524d\u7f51\u683c\u9700\u8981\u8986\u76d63\u4e2a\u683c\u5b50\u3002\u4e8e\u662f\uff0c\u6211\u4eec\u53ef\u4ee5\u770b\u5230<code>.item-b<\/code>\u9ad8\u5ea6\u8d2f\u7a7f\u6574\u4e2agrid\u5bb9\u5668\u3002<\/p>\n<h4 id=\"grid-column-row\">2. grid-column\u548cgrid-row<\/h4>\n<p><code>grid-column<\/code>\u548c<code>grid-row<\/code>\u90fd\u662f\u7f29\u5199\u5566\uff0c\u524d\u8005\u662f<a href=\"#grid-column-row-se\"><code>grid-column-start<\/code><\/a> + <a href=\"#grid-column-row-se\"><code>grid-column-end<\/code><\/a>\u7684\u7f29\u5199\uff0c\u540e\u8005\u662f<a href=\"#grid-column-row-se\"><code>grid-row-start<\/code><\/a> + <a href=\"#grid-column-row-se\"><code>grid-row-end<\/code><\/a>\u7684\u7f29\u5199\u3002<\/p>\n<p>\u8bed\u6cd5\u4e0a\u662f\u4f7f\u7528\u659c\u6760\u5206\u9694\uff0c\u5982\u4e0b\uff1a<\/p>\n<pre>.item {\r\n    grid-column: &lt;start-line&gt; \/ &lt;end-line&gt; | &lt;start-line&gt; \/ span &lt;value&gt;;\r\n    grid-row: &lt;start-line&gt; \/ &lt;end-line&gt; | &lt;start-line&gt; \/ span &lt;value&gt;;\r\n}<\/pre>\n<p>\u8bed\u6cd5\u4e2d\u7684\u7ba1\u9053\u5206\u9694\u7b26<code>|<\/code>\u8868\u793a\u201c\u6216\u8005\u201d\u7684\u610f\u601d\u3002\u7136\u540e<code>&lt;start-line&gt;<\/code>\u5c31\u662f<code>grid-*-start<\/code>\u5c5e\u6027\u503c\uff0c<code>&lt;end-line&gt;<\/code>\u5c31\u662f<code>grid-*-end<\/code>\u5c5e\u6027\u503c\u3002\u4f8b\u5982\uff1a<\/p>\n<pre>.item-b {\r\n    grid-column: 2 \/ span \u7eb5\u7ebf3;\r\n    grid-row: \u7b2c\u4e00\u884c\u5f00\u59cb \/ span 3;\r\n}<\/pre>\n<p>\u7b49\u540c\u4e8e\uff1a<\/p>\n<pre>.item-b {\r\n    grid-column-start: 2;\r\n    grid-column-end: span \u7eb5\u7ebf3;\r\n    grid-row-start: \u7b2c\u4e00\u884c\u5f00\u59cb;\r\n    grid-row-end: span 3;\r\n}<\/pre>\n<h4 id=\"grid-area\">3. grid-area<\/h4>\n<p><code>grid-area<\/code>\u8868\u793a\u5f53\u524d\u7f51\u683c\u6240\u5360\u7528\u7684\u533a\u57df\u3002\u5728\u4ecb\u7ecd<a href=\"#grid-template-areas\"><code>grid-template-areas<\/code><\/a>\u5c5e\u6027\u7684\u65f6\u5019\u5c31\u6f14\u793a\u8fc7\u8be5\u5c5e\u6027\uff0c\u6211\u4eec\u4f7f\u7528<a href=\"#grid-template-areas\"><code>grid-template-areas<\/code><\/a>\u5c5e\u6027\u81ea\u5b9a\u4e49\u4e00\u4e9b\u7f51\u683c\u533a\u57df\uff0c\u7136\u540e\u4f7f\u7528<code>grid-area<\/code>\u5c5e\u6027\u8ba9grid\u5b50\u9879\u6307\u5b9a\u4f7f\u7528\u8fd9\u4e9b\u533a\u57df\uff0c\u5c31\u81ea\u52a8\u8fdb\u884c\u4e86\u533a\u57df\u5206\u5e03\u3002<\/p>\n<p><del datetime=\"2020-05-31T02:33:55+00:00\"><code>grid-area<\/code>\u548c<code>grid-column\/grid-row<\/code>\u4f5c\u7528\u90fd\u662fgrid\u5b50\u9879\u7684\u5206\u5e03\uff0c\u4f46<code>grid-area<\/code>\u8bed\u4e49\u8981\u66f4\u597d\uff0c\u8bc6\u522b\u5ea6\u66f4\u4f73\uff0c\u975e\u5e38\u9002\u5408\u5177\u6709\u529f\u80fd\u5c5e\u6027\u7684\u5e03\u5c40\u533a\u57df\uff08\u5982\u5934\u90e8\uff0c\u5e95\u90e8\uff09\uff0c\u540c\u65f6\uff0c\u8fd8\u652f\u6301\u975e\u89c4\u5219\u533a\u57df\u3002<\/del><\/p>\n<p><strong>\u66f4\u65b0\u4e8e2020-05-31<\/strong><\/p>\n<p><code>grid-area<\/code>\u5176\u5b9e\u662f<code>grid-row-start<\/code>, <code>grid-column-start<\/code>, <code>grid-row-end<\/code> \u4ee5\u53ca <code>grid-column-end<\/code>\u5c5e\u6027\u7684\u7f29\u5199\uff0c\u4ee5\u53ca\u989d\u5916\u652f\u6301<code>grid-template-areas<\/code>\u8bbe\u7f6e\u7684\u7f51\u683c\u540d\u79f0\u800c\u5df2\u3002<\/p>\n<p><span class=\"s\">\/\/zxx:\u66f4\u65b0end<\/span><\/p>\n<p>\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>.item {\r\n    grid-area: &lt;name&gt; | &lt;row-start&gt; \/ &lt;column-start&gt; \/ &lt;row-end&gt; \/ &lt;column-end&gt;;\r\n}<\/pre>\n<p>\u5176\u4e2d\uff1a<\/p>\n<dl class=\"grid-dl\">\n<dt>&lt;name&gt;<\/dt>\n<dd>\u533a\u57df\u540d\u79f0\u3002\u7531<a href=\"#grid-template-areas\"><code>grid-template-areas<\/code><\/a>\u5c5e\u6027\u521b\u5efa\u3002<\/dd>\n<dt>&lt;row-start&gt; \/ &lt;column-start&gt; \/ &lt;row-end&gt; \/ &lt;column-end&gt;<\/dt>\n<dd>\u5360\u636e\u7f51\u683c\u533a\u57df\u7684\u7eb5\u6a2a\u8d77\u59cb\u4f4d\u7f6e\u3002<\/dd>\n<\/dl>\n<p><code>&lt;name&gt;<\/code>\u5c5e\u6027\u503c\u4f7f\u7528\u53c2\u89c1\u4e0a\u9762<a href=\"#demo-areas\">\u5f20\u8001\u677f\u5212\u5206\u9c7c\u5858\u6848\u4f8b<\/a>\u3002\u6211\u4eec\u8fd9\u91cc\u6f14\u793a\u4e0b\u540e\u9762\u7684\u57fa\u4e8e\u4f4d\u7f6e\u7684\u533a\u57df\u5212\u5206\uff0c\u5982\u4e0b\u4ee3\u7801\uff1a<\/p>\n<pre>.container {\r\n    grid-template: 1fr 1fr 1fr\/1fr 1fr 1fr 1fr;\r\n}\r\n.item-c { \r\n    grid-area: 1 \/ 2 \/ 3 \/ 4;\r\n}<\/pre>\n<div class=\"grid grid-base-15\">\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div class=\"item-c\">\n<p class=\"grid-p\">1\/2\/3\/4\u5212\u5206\u533a<\/p>\n<\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<div><\/div>\n<\/div>\n<p>\u8868\u793a\u6c34\u5e73\u7f51\u683c\u7ebf\u4f4d\u7f6e\u8d77\u6b62\u5206\u522b\u662f1,3\uff0c\u5782\u76f4\u8d77\u6b62\u7f51\u683c\u7ebf\u4f4d\u7f6e\u662f2,4\u3002\u4e8e\u662f\u5f97\u5230\u4e00\u4e2a2&#215;2\u5927\u5c0f\u7684\u533a\u57df\u3002<\/p>\n<h4 id=\"justify-self\">4. justify-self<\/h4>\n<p><code>justify-self<\/code>\u8868\u793a\u5355\u4e2a\u7f51\u683c\u5143\u7d20\u7684\u6c34\u5e73\u5bf9\u9f50\u65b9\u5f0f\u3002\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>.item {\r\n    justify-self: stretch | start | end | center;\r\n}<\/pre>\n<p>\u5176\u4e2d\uff08\u5047\u8bbe\u6587\u6863\u6d41\u65b9\u5411\u6ca1\u6709\u53d8\uff09\uff1a<\/p>\n<dl class=\"grid-dl\">\n<dt>stretch<\/dt>\n<dd><del datetime=\"2020-05-31T05:53:46+00:00\">\u9ed8\u8ba4\u503c\uff0c<\/del>\u62c9\u4f38\u3002\u8868\u73b0\u4e3a\u6c34\u5e73\u586b\u5145\u3002<span class=\"s\">\/\/zxx: \u7ea0\u6b63\uff1a\u9ed8\u8ba4\u503c\u662fauto<\/span><\/dd>\n<dt>start<\/dt>\n<dd>\u8868\u73b0\u4e3a\u7f51\u683c\u6c34\u5e73\u5c3a\u5bf8\u6536\u7f29\u4e3a\u5185\u5bb9\u5927\u5c0f\uff0c\u540c\u65f6\u6cbf\u7740\u7f51\u683c\u7ebf\u5de6\u4fa7\u5bf9\u9f50\u663e\u793a\u3002<\/dd>\n<dt>end<\/dt>\n<dd>\u8868\u73b0\u4e3a\u7f51\u683c\u6c34\u5e73\u5c3a\u5bf8\u6536\u7f29\u4e3a\u5185\u5bb9\u5927\u5c0f\uff0c\u540c\u65f6\u6cbf\u7740\u7f51\u683c\u7ebf\u53f3\u4fa7\u5bf9\u9f50\u663e\u793a\u3002<\/dd>\n<dt>center<\/dt>\n<dd>\u8868\u73b0\u4e3a\u7f51\u683c\u6c34\u5e73\u5c3a\u5bf8\u6536\u7f29\u4e3a\u5185\u5bb9\u5927\u5c0f\uff0c\u540c\u65f6\u5728\u5f53\u524d\u7f51\u683c\u533a\u57df\u5185\u90e8\u6c34\u5e73\u5c45\u4e2d\u5bf9\u9f50\u663e\u793a\u3002<\/dd>\n<\/dl>\n<p>\u5404\u4e2a\u5c5e\u6027\u503c\u5b9e\u65f6\u6548\u679c\u5982\u4e0b\uff08\u70b9\u51fb\u5355\u9009\u6846\u4f53\u9a8c\u4e0d\u540c\u5c5e\u6027\u503c\u5e03\u5c40\u6548\u679c\uff09\uff1a<\/p>\n<div class=\"grid-radio-x jsGridRadio\"><span class=\"check-group\"><input type=\"radio\" id=\"justifySelf1\" name=\"justifySelf\" value=\"stretch\" checked><label for=\"justifySelf1\" class=\"ui-radio\"><\/label><label for=\"justifySelf1\" class=\"mr20\">stretch<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"justifySelf2\" name=\"justifySelf\" value=\"start\"><label for=\"justifySelf2\" class=\"ui-radio\"><\/label><label for=\"justifySelf2\" class=\"mr20\">start<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"justifySelf3\" name=\"justifySelf\" value=\"end\"><label for=\"justifySelf3\" class=\"ui-radio\"><\/label><label for=\"justifySelf3\" class=\"mr20\">end<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"justifySelf4\" name=\"justifySelf\" value=\"center\"><label for=\"justifySelf4\" class=\"ui-radio\"><\/label><label for=\"justifySelf4\">center<\/label><\/span><\/div>\n<div class=\"grid grid-base-10\">\n<div id=\"justifySelf\" style=\"background-color: rgba(255,255,0, .5);\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72471\" width=\"128\" height=\"86\" class=\"size-small\"><\/div>\n<div data-index=\"2\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm2.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm2.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72472\" width=\"96\" height=\"128\" class=\"size-small\"><\/div>\n<div data-index=\"3\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm3.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm3.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72473\" width=\"128\" height=\"96\" class=\"size-small\"><\/div>\n<div data-index=\"4\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm4.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm4.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72474\" width=\"128\" height=\"96\" class=\"size-small\"><\/div>\n<\/div>\n<h4 id=\"align-self\">5. align-self<\/h4>\n<p><code>align-self<\/code>\u6307\u5b9a\u4e86\u7f51\u683c\u5143\u7d20\u7684\u5782\u76f4\u5448\u73b0\u65b9\u5f0f\uff0c\u662f\u5782\u76f4\u62c9\u4f38\u663e\u793a\uff0c\u8fd8\u662f\u4e0a\u4e2d\u4e0b\u5bf9\u9f50\uff0c\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>.container {\r\n    align-self: stretch | start | end | center;\r\n}<\/pre>\n<p>\u5176\u4e2d\uff08\u5047\u8bbe\u6587\u6863\u6d41\u65b9\u5411\u4e3a\u7f51\u9875\u9ed8\u8ba4\uff09\uff1a<\/p>\n<dl class=\"grid-dl\">\n<dt>stretch<\/dt>\n<dd><del datetime=\"2020-05-31T05:53:46+00:00\">\u9ed8\u8ba4\u503c\uff0c<\/del>\u62c9\u4f38\u3002\u8868\u73b0\u4e3a\u5782\u76f4\u586b\u5145\u3002<span class=\"s\">\/\/zxx: \u7ea0\u6b63\uff1a\u9ed8\u8ba4\u503c\u662fauto<\/span><\/dd>\n<dt>start<\/dt>\n<dd>\u8868\u73b0\u4e3a\u7f51\u683c\u5782\u76f4\u5c3a\u5bf8\u6536\u7f29\u4e3a\u5185\u5bb9\u5927\u5c0f\uff0c\u540c\u65f6\u6cbf\u7740\u4e0a\u7f51\u683c\u7ebf\u5bf9\u9f50\u663e\u793a\u3002<\/dd>\n<dt>end<\/dt>\n<dd>\u8868\u73b0\u4e3a\u7f51\u683c\u5782\u76f4\u5c3a\u5bf8\u6536\u7f29\u4e3a\u5185\u5bb9\u5927\u5c0f\uff0c\u540c\u65f6\u6cbf\u7740\u4e0b\u7f51\u683c\u7ebf\u5bf9\u9f50\u663e\u793a\u3002<\/dd>\n<dt>center<\/dt>\n<dd>\u8868\u73b0\u4e3a\u7f51\u683c\u5782\u76f4\u5c3a\u5bf8\u6536\u7f29\u4e3a\u5185\u5bb9\u5927\u5c0f\uff0c\u540c\u65f6\u5728\u5f53\u524d\u7f51\u683c\u533a\u57df\u5185\u90e8\u5782\u76f4\u5c45\u4e2d\u5bf9\u9f50\u663e\u793a\u3002<\/dd>\n<\/dl>\n<p>\u5404\u4e2a\u5c5e\u6027\u503c\u5b9e\u65f6\u6548\u679c\u5982\u4e0b\uff08\u70b9\u51fb\u5355\u9009\u6846\u4f53\u9a8c\u4e0d\u540c\u5c5e\u6027\u503c\u5e03\u5c40\u6548\u679c\uff09\uff1a<\/p>\n<div class=\"grid-radio-x jsGridRadio\"><span class=\"check-group\"><input type=\"radio\" id=\"alignSelf1\" name=\"alignSelf\" value=\"stretch\" checked><label for=\"alignSelf1\" class=\"ui-radio\"><\/label><label for=\"alignSelf1\" class=\"mr20\">stretch<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"alignSelf2\" name=\"alignSelf\" value=\"start\"><label for=\"alignSelf2\" class=\"ui-radio\"><\/label><label for=\"alignSelf2\" class=\"mr20\">start<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"alignSelf3\" name=\"alignSelf\" value=\"end\"><label for=\"alignSelf3\" class=\"ui-radio\"><\/label><label for=\"alignSelf3\" class=\"mr20\">end<\/label><\/span> <span class=\"check-group\"><input type=\"radio\" id=\"alignSelf4\" name=\"alignSelf\" value=\"center\"><label for=\"alignSelf4\" class=\"ui-radio\"><\/label><label for=\"alignSelf4\">center<\/label><\/span><\/div>\n<div class=\"grid grid-base-10\">\n<div data-index=\"1\" id=\"alignSelf\" style=\"background-color: rgba(255,255,0, .5);\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72471\" width=\"128\" height=\"86\" class=\"size-small\"><\/div>\n<div data-index=\"2\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm2.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm2.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72472\" width=\"96\" height=\"128\" class=\"size-small\"><\/div>\n<div data-index=\"3\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm3.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm3.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72473\" width=\"128\" height=\"96\" class=\"size-small\"><\/div>\n<div data-index=\"4\"><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s128\/mm4.jpg\" srcset=\"\/\/image.zhangxinxu.com\/image\/study\/s\/s256\/mm4.jpg 2x\" alt=\"\u793a\u610f\u56fe\u72474\" width=\"128\" height=\"96\" class=\"size-small\"><\/div>\n<\/div>\n<h4 id=\"place-self\">6. place-self<\/h4>\n<p><code>place-items<\/code>\u53ef\u4ee5\u8ba9<code>align-self<\/code>\u548c<code>justify-self<\/code>\u5c5e\u6027\u5199\u5728\u5355\u4e2a\u58f0\u660e\u4e2d\u3002\u8bed\u6cd5\u5982\u4e0b\uff1a<\/p>\n<pre>.item {\r\n    place-self: &lt;align-self&gt; &lt;justify-self&gt;?\r\n}<\/pre>\n<p>\u8fd9\u91cc\u987a\u5e8f\u662f<code>align-self<\/code>\u5728\u524d\uff0c<code>justify-self<\/code>\u5728\u540e\u3002\u9996\u5b57\u6bcda,j\uff0ca,j\uff0ca,j\uff0c\u53e3\u4e2d\u4e0d\u65ad\u91cd\u590d\uff0c\u6709\u6ca1\u6709\u53d1\u73b0\u8ddfangelababy\u53d1\u97f3\u5f88\u50cf\uff0c\u6ca1\u9519\uff0c\u8bb0\u4f4fangelababy\u6211\u4eec\u4e5f\u5c31\u8bb0\u4f4f\u8fd9\u91cc\u7684\u987a\u5e8f\u4e86\u3002<\/p>\n<p>\u636e\u8bf4Edge15\u53ca\u4e4b\u524d\u7248\u672c\u5c1a\u4e0d\u652f\u6301<code>place-self<\/code>\u5c5e\u6027\uff08\u81ea\u5df1\u672a\u5b9e\u6d4b\uff09\uff0c\u56e0\u6b64\uff0c\u5982\u679c\u6709\u517c\u5bb9\u6027\u987e\u8651\uff0c\u5efa\u8bae\u8fd8\u662f\u5206\u5f00\u4e66\u5199\u3002<\/p>\n<h3>\u56db\u3001\u5176\u4ed6Grid\u77e5\u8bc6\u70b9<\/h3>\n<ul>\n<li>\u5728Grid\u5e03\u5c40\u4e2d\uff0c<code>float<\/code>\uff0c<code>display:inline-block<\/code>\uff0c<code>display:table-cell<\/code>\uff0c<code>vertical-align<\/code>\u4ee5\u53ca<code>column-*<\/code>\u8fd9\u4e9b\u5c5e\u6027\u548c\u58f0\u660e\u5bf9grid\u5b50\u9879\u662f\u6ca1\u6709\u4efb\u4f55\u4f5c\u7528\u7684\u3002\u8fd9\u4e2a\u53ef\u4ee5\u8bf4\u662fGrid\u5e03\u5c40\u4e2d\u7684\u5e38\u8bc6\uff0c\u9762\u8bd5\u7ecf\u5e38\u4f1a\u95ee\u7684\uff0c\u4e00\u5b9a\u8981\u8bb0\u5f97\u3002<\/li>\n<li>Grid\u5e03\u5c40\u5219\u9002\u7528\u4e8e\u66f4\u5927\u89c4\u6a21\u7684\u5e03\u5c40\uff08\u4e8c\u7ef4\u5e03\u5c40\uff09\uff0c\u800cFlexbox\u5e03\u5c40\u6700\u9002\u5408\u5e94\u7528\u7a0b\u5e8f\u7684\u7ec4\u4ef6\u548c\u5c0f\u89c4\u6a21\u5e03\u5c40\uff08\u4e00\u7ef4\u5e03\u5c40\uff09\uff0c\u5173Flex\u5e03\u5c40\u8bf7\u53c2\u89c1\u201c<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=8063\">\u5199\u7ed9\u81ea\u5df1\u770b\u7684display: flex\u5e03\u5c40\u6559\u7a0b\u201d\u4e00\u6587<\/a>\u3002<\/li>\n<li>\u547d\u540d\u867d\u7136\u652f\u6301\u4e2d\u6587\uff0c\u4f46\u7531\u4e8eCSS\u6587\u4ef6\u4e2d\u6587\u5b58\u5728\u4e71\u7801\u7684\u98ce\u9669\uff0c\u6240\u4ee5\u2026\u2026\u521b\u65b0\u8fd8\u662f\u4fdd\u5b88\u5c31\u770b\u5927\u5bb6\u81ea\u5df1\u7684\u6289\u62e9\u4e86\u3002<\/li>\n<li>IE10-IE15\u867d\u7136\u540d\u4e49\u4e0a\u652f\u6301Grid\u5e03\u5c40\uff0c\u4f46\u652f\u6301\u7684\u662f\u8001\u7248\u672c\u8bed\u6cd5\uff08\u672c\u6587\u662f\u4ecb\u7ecd\u7684\u5168\u662f2.0\u5168\u65b0\u8bed\u6cd5\uff09\uff0c\u8fd8\u9700\u8981\u52a0<code>-ms-<\/code>\u79c1\u6709\u524d\u7f00\uff0c\u7cbe\u529b\u539f\u56e0\uff0cIE\u4e0b\u7684\u4f7f\u7528\u5e76\u672a\u6df1\u7a76\uff0c\u4ee5\u540e\u6709\u673a\u4f1a\u518d\u8865\u5145\u3002<\/li>\n<\/ul>\n<p>\u53e6\u5916\uff1a<\/p>\n<p>\u672c\u6587\u6240\u6709\u6c34\u5e73\u548c\u5782\u76f4\uff0c\u5de6\u4fa7\u4e0e\u53f3\u4fa7\u8fd9\u7c7b\u65b9\u4f4d\u7684\u63cf\u8ff0\u5747\u662f\u5728\u7f51\u9875\u7684\u6c34\u5e73\u548c\u5782\u76f4\u6d41\u90fd\u662f\u9ed8\u8ba4\u65b9\u5411\u524d\u63d0\u4e0b\u7684\u8868\u8ff0\u3002<\/p>\n<p>\u672c\u6559\u7a0b\u4f18\u70b9\u5728\u4e8e\u4ea4\u4e92\u6548\u679c\u53ef\u4ee5\u5b9e\u65f6\u4f53\u9a8c\uff0c\u66f4\u76f4\u89c2\u3002\u5982\u679c\u662f\u8f6c\u8f7d\u6587\u7ae0\uff0c\u5fc5\u5b9a\u6ca1\u6709\u6548\u679c\uff0c\u8bbf\u95ee<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=8144\">\u539f\u6587<\/a>\u5373\u53ef\u3002<\/p>\n<p>Grid\u5e03\u5c40\u81ea\u5df1\u4e4b\u524d\u5e76\u672a\u5728\u5b9e\u9645\u9879\u76ee\u4e2d\u4f7f\u7528\u8fc7\uff0c\u672c\u6587\u5185\u5bb9\u4e5f\u662f\u8fb9\u5b66\u8fb9\u5199\uff0c\u6587\u4e2d\u82e5\u6709\u8868\u8ff0\u4e0d\u51c6\u786e\u7684\u5730\u65b9\u6b22\u8fce\u6307\u6b63\u3002<\/p>\n<p>\u611f\u8c22\u9605\u8bfb\uff01<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/emtion\/emoji\/1f603.svg\" width=\"20\" height=\"20\" align=\"absmiddle\"><\/p>\n<p>\u53c2\u8003\u6587\u7ae0\uff1a<a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\" rel=\"noopener nofollow\" target=\"_blank\">A Complete Guide to Grid<\/a><\/p>\n<p><script>(function(){if(![].map){return}var b=document.querySelectorAll(\"#lineRadioX input\");var a=document.getElementById(\"gridLineName\");if(b.length&&a){[].slice.call(b).forEach(function(d){d.addEventListener(\"click\",function(){var e=this.value;a.setAttribute(\"data-type\",e)})})}var c=document.querySelectorAll(\".jsGridRadio input\");[].slice.call(c).forEach(function(d){d.addEventListener(\"click\",function(){var e=this.name,f=this.value;var g=document.getElementById(e);if(g){g.style[e.split(\"_\")[0]]=f}})})})();<\/script><\/p>\n<p>\u672c\u6587\u4e3a\u539f\u521b\u6587\u7ae0\uff0c\u4f1a\u7ecf\u5e38\u66f4\u65b0\u77e5\u8bc6\u70b9\u4ee5\u53ca\u4fee\u6b63\u4e00\u4e9b\u9519\u8bef\uff0c\u56e0\u6b64\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u539f\u51fa\u5904\uff0c\u65b9\u4fbf\u6eaf\u6e90\uff0c\u907f\u514d\u9648\u65e7\u9519\u8bef\u77e5\u8bc6\u7684\u8bef\u5bfc\uff0c\u540c\u65f6\u6709\u66f4\u597d\u7684\u9605\u8bfb\u4f53\u9a8c\u3002<br \/>\n\u672c\u6587\u5730\u5740\uff1a<a href=\"https:\/\/www.zhangxinxu.com\/wordpress\/?p=8144\">https:\/\/www.zhangxinxu.com\/wordpress\/?p=8144<\/a><\/p>\n<p>\uff08\u672c\u7bc7\u5b8c\uff09<\/p>\n","protected":false},"excerpt":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"\/\/image.zhangxinxu.com\/image\/blog\/201810\/flex-thumb.jpg\" width=\"161\" height=\"100\" class=\"alignright size-medium\" alt=\"display:grid\u5e03\u5c40\" \/><\/p>\n<p>\u672c\u6587\u8be6\u5c3d\u4ecb\u7ecd\u4e86display:grid\u5e03\u5c40\u7684\u5404\u4e2a\u5c5e\u6027\uff0c\u6700\u5927\u7684\u4f18\u70b9\u5728\u4e8e\u6240\u6709grid\u76f8\u5173\u5c5e\u6027\u503c\u7684\u6837\u5f0f\u8868\u73b0\u90fd\u662f\u5b9e\u65f6\u6e32\u67d3\u7684\uff0c\u70b9\u51fb\u4e0d\u540c\u7684\u5c5e\u6027\u503c\uff0c\u5c31\u53ef\u4ee5\u7acb\u5373\u5b9e\u65f6\u770b\u5230\u4e0d\u540c\u7684\u5e03\u5c40\u6548\u679c\uff0c\u975e\u5e38\u76f4\u89c2\u3002\u540c\u65f6\uff0c\u5f88\u591a\u5c5e\u6027\u7684\u89c4\u5219\u63cf\u8ff0\u8981\u6bd4\u73b0\u6709\u7684\u5f88\u591a\u6587\u7ae0\u4ecb\u7ecd\u7684\u8981\u66f4\u8be6\u5c3d\uff0c\u5bf9\u4e8e\u521d\u5b66\u8005\u4e00\u5b9a\u662f\u4e00\u4e2a\u5f88\u4e0d\u9519\u7684\u7f51\u683c\u5e03\u5c40\u5b66\u4e60\u6559\u7a0b\u3002<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[1341,1340,1346,177,1271,1348,1347,1356,1353,1355,1354,1351,1358,1350,1339,1352,1357,231,1349],"_links":{"self":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/8144"}],"collection":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/comments?post=8144"}],"version-history":[{"count":1,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/8144\/revisions"}],"predecessor-version":[{"id":11660,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/posts\/8144\/revisions\/11660"}],"wp:attachment":[{"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/media?parent=8144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/categories?post=8144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhangxinxu.com\/wordpress\/wp-json\/wp\/v2\/tags?post=8144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}