{"action":"opened","issue":{"url":"https://api.github.com/repos/yourshero/blogs/issues/6","repository_url":"https://api.github.com/repos/yourshero/blogs","labels_url":"https://api.github.com/repos/yourshero/blogs/issues/6/labels{/name}","comments_url":"https://api.github.com/repos/yourshero/blogs/issues/6/comments","events_url":"https://api.github.com/repos/yourshero/blogs/issues/6/events","html_url":"https://github.com/yourshero/blogs/issues/6","id":386059148,"node_id":"MDU6SXNzdWUzODYwNTkxNDg=","number":6,"title":"超能力grid布局","user":{"login":"yourshero","id":29734343,"node_id":"MDQ6VXNlcjI5NzM0MzQz","avatar_url":"https://avatars3.githubusercontent.com/u/29734343?v=4","gravatar_id":"","url":"https://api.github.com/users/yourshero","html_url":"https://github.com/yourshero","followers_url":"https://api.github.com/users/yourshero/followers","following_url":"https://api.github.com/users/yourshero/following{/other_user}","gists_url":"https://api.github.com/users/yourshero/gists{/gist_id}","starred_url":"https://api.github.com/users/yourshero/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yourshero/subscriptions","organizations_url":"https://api.github.com/users/yourshero/orgs","repos_url":"https://api.github.com/users/yourshero/repos","events_url":"https://api.github.com/users/yourshero/events{/privacy}","received_events_url":"https://api.github.com/users/yourshero/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-11-30T06:44:47Z","updated_at":"2018-11-30T06:44:47Z","closed_at":null,"author_association":"OWNER","body":"###  超能力grid布局\r\nCSS Grid 获得了主流浏览器（Safari，Chrome，Firefox，Edge）的原生支持\r\nCSS Grid 布局由两个核心组成部分是 **wrapper**（父元素）和 **items**（子元素）。 wrapper 是实际的 grid(网格)，items 是 grid(网格) 内的内容。\r\n## 第一个grid布局\r\n```\r\n<div class=\"wrapper\">\r\n  <div>1</div>\r\n  <div>2</div>\r\n  <div>3</div>\r\n  <div>4</div>\r\n  <div>5</div>\r\n  <div>6</div>\r\n</div>\r\n.wrapper {\r\n    display: grid;\r\n}\r\n```\r\n![1_vty7c5fmip8olkjrgp-vbg](https://user-images.githubusercontent.com/29734343/49272184-98815d80-f4ab-11e8-877c-634a904da2c3.png)\r\n##  Columns(列) 和 rows(行)\r\n正如你所看到的，我们为 grid-template-columns 写入了 3 个值，这样我们就会得到 3 列。 我们想要得到 2 行，因此我们为 grid-template-rows 指定了2个值。\r\n这些值决定了我们希望我们的列有多宽（ 100px ），以及我们希望行数是多高（ 50px ）\r\n![image](https://user-images.githubusercontent.com/29734343/49272380-4b51bb80-f4ac-11e8-902d-577a63eb2868.png)\r\n###  放置 items(子元素)\r\n这里才是体现 Grid 布局超能力的地方，因为它使得创建布局变得非常简单。\r\n```\r\n<div class=\"wrapper\">\r\n  <div class=\"item1\">1</div>\r\n  <div class=\"item2\">2</div>\r\n  <div class=\"item3\">3</div>\r\n  <div class=\"item4\">4</div>\r\n  <div class=\"item5\">5</div>\r\n  <div class=\"item6\">6</div>\r\n</div>\r\n.wrapper {\r\n    display: grid;\r\n    grid-template-columns: 100px 100px 100px;\r\n    grid-template-rows: 100px 100px 100px;\r\n}\r\n```\r\n![image](https://user-images.githubusercontent.com/29734343/49272713-843e6000-f4ad-11e8-9106-891a745a8a87.png)\r\n\r\n\r\n不知道你发现没有，我们只在页面上看到 3×2 的 grid(网格)，而我们定义的是 3×3 的 grid(网格)。这是因为我们只有 6 个 items(子元素) 来填满这个网格。如果我们再加3个 items(子元素)，那么最后一行也会被填满。\r\n要定位和调整 items(子元素) 大小，我们将使用 grid-column 和 grid-row 属性来设置：\r\n```\r\n.item1 {\r\n    grid-column-start: 1;\r\n    grid-column-end: 4;\r\n}\r\n```\r\n\r\n![image](https://user-images.githubusercontent.com/29734343/49272841-e9925100-f4ad-11e8-9d89-0ce9a42e15a6.png)\r\n最后，给你一个更简单的缩写方法来编写上面的语法：\r\n```\r\n.item1 {\r\n    grid-column: 1 / 4;\r\n}\r\n```\r\n最后再来布局一次\r\n```\r\n.item1 {\r\n    grid-column-start: 1;\r\n    grid-column-end: 3;\r\n}\r\n.item3 {\r\n    grid-row-start: 2;\r\n    grid-row-end: 4;\r\n}\r\n.item4 {\r\n    grid-column-start: 2;\r\n    grid-column-end: 4;\r\n}\r\n```\r\n![1_qdsybpxjxsat6utohguapq](https://user-images.githubusercontent.com/29734343/49272994-71785b00-f4ae-11e8-8994-e71f9f026c19.png)\r\n想继续玩玩grid,猛戳[http://cssgridgarden.com/](http://cssgridgarden.com/)\r\n"}}
{"actor":{"display_login":"yourshero"}}