{"id":7172,"date":"2019-01-17T17:53:18","date_gmt":"2019-01-17T09:53:18","guid":{"rendered":"https:\/\/sdeno.com\/?p=7172"},"modified":"2019-01-18T18:30:08","modified_gmt":"2019-01-18T10:30:08","slug":"grid%e5%b8%83%e5%b1%80%e7%ac%94%e8%ae%b0","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=7172","title":{"rendered":"grid\u5e03\u5c40\u7b14\u8bb0"},"content":{"rendered":"<p>\u6709\u70b9\u7c7b\u4f3ctable\u5e03\u5c40\uff0c\u4f46\u662f\u6bd4table\u66f4\u7075\u6d3b\u66f4\u4f18\u4e8eflex\u5e03\u5c40\u3002<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #ff0000;\">\u6848\u4f8b\uff1a<\/span><\/p>\n<pre>.container {\r\n  display: grid;\r\n  grid-template-columns: 30px 30px 30px; \/\/3\u5217\u6bcf\u521730px\u5bbd\r\n  grid-template-rows: 30px 30px 30px;  \/\/3\u884c\u6bcf\u884c30px\u9ad8\r\n}\r\n\r\n&lt;div class=\"container\"&gt;\r\n  &lt;!--\u65e0\u9700\u5728\u91cc\u9762\u5b9a\u4e49div\u5143\u7d20\uff0c\u5355\u5143\u8868\u683c\u5b8c\u5168\u53ef\u4ee5\u4f7f\u7528css\u6765\u64cd\u4f5c--&gt;\r\n&lt;\/div&gt;<\/pre>\n<figure class=\"mdx-lazyload-container\" style=\"max-width:134px\"><div style=\"padding-top:91.791044776119%\"><\/div><div class=\"mdx-img-loading-sp mdui-valign\"><div><div class=\"mdui-spinner\"><\/div><\/div><\/div><img width=\"134\" height=\"123\" class=\"alignnone size-full wp-image-7189 lazyload\" title=\"grid\u5e03\u5c40\u7b14\u8bb0\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-src=\"https:\/\/sdeno.com\/wp-content\/uploads\/2019\/01\/vgrid.jpg\" alt=\"https:\/\/sdeno.com\/wp-content\/uploads\/2019\/01\/vgrid.jpg\"><\/figure>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #ff0000;\">\u7f51\u683c\u5bb9\u5668(\u53ef\u4ee5\u7406\u89e3\u4e3a&lt;table&gt;)\uff1a<\/span><\/p>\n<p>\u4ee5\u4e0b\u662f\u5bb9\u5668\u62e5\u6709\u7684\u5c5e\u6027<\/p>\n<pre>display: grid | inline-grid; \/\/\u5fc5\u987b\u58f0\u660e\uff0c\u4e3a\u4e00\u4e2a\u5bb9\u5668\u5b9a\u4e49grid\u624d\u80fd\u4f7f\u7528\u4ee5\u4e0b\u5c5e\u6027\u529f\u80fd\uff0c\u5757\u72b6|\u5185\u8054<\/pre>\n<pre>\/\/\u663e\u793a\u8868\u683c\r\ngrid-template-columns: 25% 25% 25% 25%; \/\/\u5217\uff0c\u591a\u5c11\u4e2a\u53c2\u6570\u5c31\u591a\u5c11\u4e2a\u5217\r\ngrid-template-rows: 25% 100px auto; \/\/\u884c\uff0c\u591a\u5c11\u4e2a\u53c2\u6570\u5c31\u591a\u5c11\u884c\r\ngrid-template: \/\/\u662fgrid-template-columns\u3001grid-template-rows\u3001grid-template-areas\u4e09\u4e2a\u5c5e\u6027\u7684\u7b80\u5199<\/pre>\n<pre>\/\/\u9690\u793a\u8868\u683c\r\ngrid-auto-columns:30px  \/\/\u5982\u679c\u4e00\u4e2a\u5355\u5143\u8868\u683c\u7684\u4f4d\u79fb\u8d85\u51fa\u4e86\u539f\u6765\u5bb9\u5668\uff0c\u90a3\u4e48\u5e03\u5c40\u4f1a\u88ab\u7834\u574f\u6389\uff0c\u53ef\u4ee5\u9884\u5148\u8bbe\u7f6e\u597d\u5355\u5143\u8868\u683c\u7684\u5bbd\u5ea6\uff0c\u6b64\u65f6\u8d85\u51fa\u7684\u90e8\u5206\u4f1a\u81ea\u52a8\u751f\u6210\u5217\u8868\u4e14\u5bbd\u5ea6\u4e3a30px\r\ngrid-auto-columns \/ grid-auto-rows<\/pre>\n<pre>grid-column-gap: 10px; \/\/\u5217\u4e4b\u95f4\u7684\u95f4\u8ddd\r\ngrid-row-gap: 15px; \/\/\u884c\u95f4\u8ddd\r\ngrid-gap: \/\/grid-row-gap\u548cgrid-column-gap\u7684\u7f29\u5199<\/pre>\n<pre>justify-items:start | end | center | stretch(\u9ed8\u8ba4); \/\/\u6c34\u5e73\u65b9\u5411\u5bf9\u9f50(\u7c7b\u4f3c\u64cd\u4f5c&lt;td&gt;\u91cc\u9762\u7684\u5143\u7d20\u5bf9\u9f50)\uff0c\r\n\u5de6\u5bf9\u9f50|\u53f3\u5bf9\u9f50|\u5c45\u4e2d|\u586b\u6ee1\u8868 \u683c(\u7c7b\u4f3cwidth:100%)\r\n\r\nalign-items: start | end | center | stretch;\/\/\u5782\u76f4\u65b9\u5411\u5bf9\u9f50(\u7c7b\u4f3c\u64cd\u4f5c&lt;td&gt;\u91cc\u9762\u7684\u5143\u7d20\u5bf9\u9f50)\uff0c\r\n\u9876\u90e8\u5bf9\u9f50|\u5e95\u90e8\u5bf9\u9f50|\u5c45\u4e2d|\u586b\u6ee1\u8868\u683c(\u7c7b \u4f3cheight:100%)\r\n\r\nplace-items \/\/&lt;align-items&gt; \u548c &lt;justify-items&gt;\u7684\u7f29\u5199<\/pre>\n<pre>justify-content: start | end | center | stretch | space-around | space-between | space-evenly; \/\/\u6574\u4e2a\u5bb9\u5668\u6c34\u5e73\u5bf9\u9f50\r\nalign-content: start | end | center | stretch | space-around | space-between | space-evenly; \/\/\u6574\u4e2a\u5bb9\u5668\u5782\u76f4\u5bf9\u9f50\r\nplace-content:&lt;align-content&gt; &lt;justify-content&gt;\u7684\u7b80\u5199<\/pre>\n<pre>grid-auto-flow: row(\u9ed8\u8ba4) | column | row dense | column dense \/\/row\u65f6\u4ee5\u884c\u4e3a\u51c6\u81ea\u52a8\u586b\u6ee1\uff0ccolumn\u65f6\u4ee5\u5217\u4e3a\u51c6\u81ea\u52a8\u5f80\u5de6\u586b\u6ee1<\/pre>\n<pre>grid: \u662fgrid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, \u548c grid-auto- \r\nflow\u7684\u7f29\u5199<\/pre>\n<p>grid-template-areas: \/\/\u4e0d\u5e38\u7528\uff0c\u9700\u8981\u770b\u6848\u4f8b\uff0c\u8981\u591a\u4e2a\u503c\u914d\u5408\u624d\u884c<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #ff0000;\">\u7f51\u683c\u9879(\u53ef\u4ee5\u7406\u89e3\u4e3a&lt;tr&gt;&lt;td&gt;)\uff1a<\/span><\/p>\n<p>\u4ee5\u4e0b\u662f\u5355\u5143\u683c\u62e5\u6709\u7684\u5c5e\u6027<\/p>\n<pre>\u5355\u4e2a\u8868\u5355\u7684\u5408\u5e76\u548c\u4f4d\u79fb\uff0c\u4ee5\u4e0b4\u4e2a\u5c5e\u6027\u9700\u8981\u540c\u65f6\u914d\u5408(\u9700\u770b\u6848\u4f8b\u914d\u5408)\uff1a\r\ngrid-column-start\r\ngrid-column-end\r\ngrid-row-start\r\ngrid-row-end\r\n\r\n\u7b49\u540c\u4ee5\u4e0b\r\n\r\ngrid-column \/\/grid-column-start\u548cgrid-column-end\u7f29\u5199\r\ngrid-row \/\/grid-row-start\u548cgrid-row-end\u7f29\u5199<\/pre>\n<pre>justify-self: start | end | center | stretch; \/\/\u5355\u4e2a\u8868\u683c\u7684\u6c34\u5e73\u65b9\u5411\u5bf9\u9f50\r\nalign-self: start | end | center | stretch; \/\/\u5355\u4e2a\u8868\u683c\u7684\u5782\u76f4\u65b9\u5411\u5bf9\u9f50\r\nplace-self: \/\/align-self \u548c justify-self \u7684\u7b80\u5199\u5f62\u5f0f<\/pre>\n<p>grid-area\/\/\u4e0d\u5e38\u7528<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #ff0000;\">repeat()\u51fd\u6570<\/span><\/p>\n<p>display\u4e0d\u80fd\u4e3a inline-grid;<\/p>\n<pre>\u6848\u4f8b1\r\ngrid-template-columns: 1fr 1fr 1fr;\r\n\u7b49\u540c\r\ngrid-template-columns: repeat(3, 1fr); \/\/3\u4e2a1fr\u5217\uff0c\u4e00\u4e2a3\u5217<\/pre>\n<pre>\u6848\u4f8b2\r\ngrid-template-columns: repeat(5, 1fr 2fr); \/\/5\u4e2a 1fr 2fr\uff0c\u4e5f\u5c31\u662f\u4e00\u4e2a10\u5217<\/pre>\n<pre>\u6848\u4f8b3\r\ngrid-template-columns: 10px repeat(8, 1fr) 20px; \/\/\u7b2c\u4e00\u5217\u4e3a10px\uff0c\u7b2c\u4e8c\u5230\u7b2c9\u5217\u4e3a1fr\uff0c\u6700\u540e\u4e00\u5217\u4e3a20px<\/pre>\n<pre>\u6848\u4f8b4\r\ngrid-template-columns: repeat(auto-fill\u6216\u8005auto-fit, 20px); \/\/auto-fill\u3001auto-fit\u4f1a\u4ee5\u5bb9\u5668\u7684\u5bbd\u5ea6\u548c20px\u4e3a\u51c6\uff0c\u6765\u51b3\u5b9a\u91cd\u590d\u7684\u6b21\u6570<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #ff0000;\">minmax()<\/span><\/p>\n<p>display\u4e0d\u80fd\u4e3a inline-grid;<\/p>\n<p>minmax(\u6700\u5c0f\u503c,\u5982\u679c\u5c0f\u4e8e\u6700\u5c0f\u503c\u5c31\u4f1a\u89e6\u53d1\u8be5\u503c)<\/p>\n<pre>grid-template-columns: repeat(3,minmax(50px,1fr)); \/\/3\u4e2a\u4ee5\u5927\u4e8e\u6216\u7b49\u4e8e50px\u7684\u5217\u5bbd\r\n\r\ngrid-template-columns: repeat(3,minmax(50px,1fr));<\/pre>\n<p>&nbsp;<\/p>\n<p><span style=\"color: #ff0000;\">\u81ea\u9002\u5e94\u6548\u679c\uff1a<\/span><\/p>\n<p>display\u4e0d\u80fd\u4e3a inline-grid;<\/p>\n<pre>grid-template-columns: repeat(auto-fill,minmax(50px,1fr)); \/\/\u81ea\u9002\u5e94\u5e03\u5c40<\/pre>\n<p>&nbsp;<\/p>\n<p>\u53c2\u8003\uff1a<\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><a href=\"http:\/\/www.css88.com\/archives\/8510\" target=\"_blank\" rel=\"noopener\">www.css88.com\/archives\/8510<\/a><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n<p><audio style=\"display: none;\" controls=\"controls\"><\/audio><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6709\u70b9\u7c7b\u4f3ctable\u5e03\u5c40\uff0c\u4f46\u662f\u6bd4table\u66f4\u7075\u6d3b\u66f4\u4f18\u4e8eflex\u5e03\u5c40\u3002 &nbsp; \u6848\u4f8b\uff1a .container [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-7172","post","type-post","status-publish","format-standard","hentry","category-11"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/7172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7172"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/7172\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7172"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7172"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}