{"action":"created","comment":{"url":"https://api.github.com/repos/ikcamp/tech-translation/pulls/comments/113610220","pull_request_review_id":35012636,"id":113610220,"diff_hunk":"@@ -1 +1,312 @@\n+ * 原文地址：[Getting to know CSS Grid Layout](https://cm.engineering/getting-to-know-css-grid-layout-818e43ca71a5)\n+ * 原文作者：[Chris Wright](https://cm.engineering/@cwrightdesign?source=post_header_lockup)\n+ * 译者：[郭华翔](#)\n+ * 校对者：[](#)\n+\n+\n+# 翻译 | CSS栅格（CSS Grid）布局入门\n+> 原文链接 [https://cm.engineering/getting-to-know-css-grid-layout-818e43ca71a5](https://cm.engineering/getting-to-know-css-grid-layout-818e43ca71a5)\n+\n+![banner](http://n1image.hjfile.cn/res7/2017/04/20/af1c9adfa03fdb0ee5343d933d967930.jpg)\n+\n+CSS栅格布局是浏览器Flexbox布局之后最重要的布局方式。我们可以忘记过去15年所使用的那些已经成为习以为常的各种“神奇数字”，hacks和变通布局方式。栅格布局提供了非常简单的声明布局方式，之后再也不需要一些常见的主流css框架，也能减少很多手动实现的布局方式\n+\n+如果你以前不熟悉CSS栅格布局，那么你可以开始了解它了。它是一种适用于容器元素，并能指定子元素的间距、大小和对齐方式的布局工具。\n+\n+CSS栅格布局赋予我们更强大的能力——大家熟悉的水平垂直居中布局，不需要增加标记语言就能做到。同样，这也能让我们不需要媒体查询就能根据可用空间自动适应。\n+\n+## 学习的最低要求\n+首先一点学习栅格布局有不少新语法需要学习，但是你只需要稍微看下就能上手。本文将会用示例带你学习CSS栅格布局各种各样重要的入门概念。\n+\n+## 浏览器兼容性\n+CSS栅格布局从Safari 10.1, Firefox 52, Opera 44, Chrome 57开始支持，微软Edge在Edge 15会更新对栅格布局的支持。\n+\n+微软的浏览器（IE10–11和Edge 13-14）有一种比较旧的实现，所以有不少限制，我们会简单介绍新的实现方式和老的实现方式之间的区别，这样你能知道如何规避他们。\n+\n+对于大多数布局，我们会使用下面的query特性来让老的浏览器对他们理解的特性也能工作：\n+\n+```css\n+@supports (display: grid) {\n+    .grid {\n+        display: grid;\n+    }\n+}\n+```\n+\n+不支持浏览器`@supports`或不支持栅格的浏览器将不会生效。\n+\n+为了能正确展示文中的示例，你需要使用[支持栅格布局的浏览器](https://igalia.github.io/css-grid-layout/enable.html)。\n+\n+## 创建带有间距（gutter）的的两列（column）栅格","path":"TODO/getting-to-know-css-grid-layout.md","position":40,"original_position":40,"commit_id":"3d39d579f5ac13561ff3e2079708f0a3fdc8a8c5","original_commit_id":"3d39d579f5ac13561ff3e2079708f0a3fdc8a8c5","user":{"login":"beyondghx","id":4946893,"avatar_url":"https://avatars0.githubusercontent.com/u/4946893?v=3","gravatar_id":"","url":"https://api.github.com/users/beyondghx","html_url":"https://github.com/beyondghx","followers_url":"https://api.github.com/users/beyondghx/followers","following_url":"https://api.github.com/users/beyondghx/following{/other_user}","gists_url":"https://api.github.com/users/beyondghx/gists{/gist_id}","starred_url":"https://api.github.com/users/beyondghx/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/beyondghx/subscriptions","organizations_url":"https://api.github.com/users/beyondghx/orgs","repos_url":"https://api.github.com/users/beyondghx/repos","events_url":"https://api.github.com/users/beyondghx/events{/privacy}","received_events_url":"https://api.github.com/users/beyondghx/received_events","type":"User","site_admin":false},"body":"done","created_at":"2017-04-27T03:48:13Z","updated_at":"2017-04-27T03:48:13Z","html_url":"https://github.com/ikcamp/tech-translation/pull/6#discussion_r113610220","pull_request_url":"https://api.github.com/repos/ikcamp/tech-translation/pulls/6","_links":{"self":{"href":"https://api.github.com/repos/ikcamp/tech-translation/pulls/comments/113610220"},"html":{"href":"https://github.com/ikcamp/tech-translation/pull/6#discussion_r113610220"},"pull_request":{"href":"https://api.github.com/repos/ikcamp/tech-translation/pulls/6"}}},"pull_request":{"url":"https://api.github.com/repos/ikcamp/tech-translation/pulls/6","id":116737398,"html_url":"https://github.com/ikcamp/tech-translation/pull/6","diff_url":"https://github.com/ikcamp/tech-translation/pull/6.diff","patch_url":"https://github.com/ikcamp/tech-translation/pull/6.patch","issue_url":"https://api.github.com/repos/ikcamp/tech-translation/issues/6","number":6,"state":"open","locked":false,"title":"Update getting-to-know-css-grid-layout.md","user":{"login":"zhouyao","id":2985953,"avatar_url":"https://avatars3.githubusercontent.com/u/2985953?v=3","gravatar_id":"","url":"https://api.github.com/users/zhouyao","html_url":"https://github.com/zhouyao","followers_url":"https://api.github.com/users/zhouyao/followers","following_url":"https://api.github.com/users/zhouyao/following{/other_user}","gists_url":"https://api.github.com/users/zhouyao/gists{/gist_id}","starred_url":"https://api.github.com/users/zhouyao/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zhouyao/subscriptions","organizations_url":"https://api.github.com/users/zhouyao/orgs","repos_url":"https://api.github.com/users/zhouyao/repos","events_url":"https://api.github.com/users/zhouyao/events{/privacy}","received_events_url":"https://api.github.com/users/zhouyao/received_events","type":"User","site_admin":false},"body":"","created_at":"2017-04-20T10:19:40Z","updated_at":"2017-04-27T03:48:13Z","closed_at":null,"merged_at":null,"merge_commit_sha":"6c0f6c93d8dde907bf02fe872cce6c31d88f753b","assignee":null,"assignees":[],"milestone":null,"commits_url":"https://api.github.com/repos/ikcamp/tech-translation/pulls/6/commits","review_comments_url":"https://api.github.com/repos/ikcamp/tech-translation/pulls/6/comments","review_comment_url":"https://api.github.com/repos/ikcamp/tech-translation/pulls/comments{/number}","comments_url":"https://api.github.com/repos/ikcamp/tech-translation/issues/6/comments","statuses_url":"https://api.github.com/repos/ikcamp/tech-translation/statuses/3d39d579f5ac13561ff3e2079708f0a3fdc8a8c5","head":{"label":"ikcamp:getting-to-know-css-grid-layout","ref":"getting-to-know-css-grid-layout","sha":"3d39d579f5ac13561ff3e2079708f0a3fdc8a8c5","user":{"login":"ikcamp","id":26807121,"avatar_url":"https://avatars1.githubusercontent.com/u/26807121?v=3","gravatar_id":"","url":"https://api.github.com/users/ikcamp","html_url":"https://github.com/ikcamp","followers_url":"https://api.github.com/users/ikcamp/followers","following_url":"https://api.github.com/users/ikcamp/following{/other_user}","gists_url":"https://api.github.com/users/ikcamp/gists{/gist_id}","starred_url":"https://api.github.com/users/ikcamp/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ikcamp/subscriptions","organizations_url":"https://api.github.com/users/ikcamp/orgs","repos_url":"https://api.github.com/users/ikcamp/repos","events_url":"https://api.github.com/users/ikcamp/events{/privacy}","received_events_url":"https://api.github.com/users/ikcamp/received_events","type":"Organization","site_admin":false},"repo":{"id":87380613,"name":"tech-translation","full_name":"ikcamp/tech-translation","owner":{"login":"ikcamp","id":26807121,"avatar_url":"https://avatars1.githubusercontent.com/u/26807121?v=3","gravatar_id":"","url":"https://api.github.com/users/ikcamp","html_url":"https://github.com/ikcamp","followers_url":"https://api.github.com/users/ikcamp/followers","following_url":"https://api.github.com/users/ikcamp/following{/other_user}","gists_url":"https://api.github.com/users/ikcamp/gists{/gist_id}","starred_url":"https://api.github.com/users/ikcamp/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ikcamp/subscriptions","organizations_url":"https://api.github.com/users/ikcamp/orgs","repos_url":"https://api.github.com/users/ikcamp/repos","events_url":"https://api.github.com/users/ikcamp/events{/privacy}","received_events_url":"https://api.github.com/users/ikcamp/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/ikcamp/tech-translation","description":"技术类文章翻译","fork":false,"url":"https://api.github.com/repos/ikcamp/tech-translation","forks_url":"https://api.github.com/repos/ikcamp/tech-translation/forks","keys_url":"https://api.github.com/repos/ikcamp/tech-translation/keys{/key_id}","collaborators_url":"https://api.github.com/repos/ikcamp/tech-translation/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/ikcamp/tech-translation/teams","hooks_url":"https://api.github.com/repos/ikcamp/tech-translation/hooks","issue_events_url":"https://api.github.com/repos/ikcamp/tech-translation/issues/events{/number}","events_url":"https://api.github.com/repos/ikcamp/tech-translation/events","assignees_url":"https://api.github.com/repos/ikcamp/tech-translation/assignees{/user}","branches_url":"https://api.github.com/repos/ikcamp/tech-translation/branches{/branch}","tags_url":"https://api.github.com/repos/ikcamp/tech-translation/tags","blobs_url":"https://api.github.com/repos/ikcamp/tech-translation/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/ikcamp/tech-translation/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/ikcamp/tech-translation/git/refs{/sha}","trees_url":"https://api.github.com/repos/ikcamp/tech-translation/git/trees{/sha}","statuses_url":"https://api.github.com/repos/ikcamp/tech-translation/statuses/{sha}","languages_url":"https://api.github.com/repos/ikcamp/tech-translation/languages","stargazers_url":"https://api.github.com/repos/ikcamp/tech-translation/stargazers","contributors_url":"https://api.github.com/repos/ikcamp/tech-translation/contributors","subscribers_url":"https://api.github.com/repos/ikcamp/tech-translation/subscribers","subscription_url":"https://api.github.com/repos/ikcamp/tech-translation/subscription","commits_url":"https://api.github.com/repos/ikcamp/tech-translation/commits{/sha}","git_commits_url":"https://api.github.com/repos/ikcamp/tech-translation/git/commits{/sha}","comments_url":"https://api.github.com/repos/ikcamp/tech-translation/comments{/number}","issue_comment_url":"https://api.github.com/repos/ikcamp/tech-translation/issues/comments{/number}","contents_url":"https://api.github.com/repos/ikcamp/tech-translation/contents/{+path}","compare_url":"https://api.github.com/repos/ikcamp/tech-translation/compare/{base}...{head}","merges_url":"https://api.github.com/repos/ikcamp/tech-translation/merges","archive_url":"https://api.github.com/repos/ikcamp/tech-translation/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/ikcamp/tech-translation/downloads","issues_url":"https://api.github.com/repos/ikcamp/tech-translation/issues{/number}","pulls_url":"https://api.github.com/repos/ikcamp/tech-translation/pulls{/number}","milestones_url":"https://api.github.com/repos/ikcamp/tech-translation/milestones{/number}","notifications_url":"https://api.github.com/repos/ikcamp/tech-translation/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/ikcamp/tech-translation/labels{/name}","releases_url":"https://api.github.com/repos/ikcamp/tech-translation/releases{/id}","deployments_url":"https://api.github.com/repos/ikcamp/tech-translation/deployments","created_at":"2017-04-06T03:05:56Z","updated_at":"2017-04-13T09:25:16Z","pushed_at":"2017-04-20T10:19:40Z","git_url":"git://github.com/ikcamp/tech-translation.git","ssh_url":"git@github.com:ikcamp/tech-translation.git","clone_url":"https://github.com/ikcamp/tech-translation.git","svn_url":"https://github.com/ikcamp/tech-translation","homepage":null,"size":77,"stargazers_count":1,"watchers_count":1,"language":null,"has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":2,"forks":0,"open_issues":2,"watchers":1,"default_branch":"master"}},"base":{"label":"ikcamp:master","ref":"master","sha":"48f21bcafcf3535f79c51144ac67e95075d10c26","user":{"login":"ikcamp","id":26807121,"avatar_url":"https://avatars1.githubusercontent.com/u/26807121?v=3","gravatar_id":"","url":"https://api.github.com/users/ikcamp","html_url":"https://github.com/ikcamp","followers_url":"https://api.github.com/users/ikcamp/followers","following_url":"https://api.github.com/users/ikcamp/following{/other_user}","gists_url":"https://api.github.com/users/ikcamp/gists{/gist_id}","starred_url":"https://api.github.com/users/ikcamp/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ikcamp/subscriptions","organizations_url":"https://api.github.com/users/ikcamp/orgs","repos_url":"https://api.github.com/users/ikcamp/repos","events_url":"https://api.github.com/users/ikcamp/events{/privacy}","received_events_url":"https://api.github.com/users/ikcamp/received_events","type":"Organization","site_admin":false},"repo":{"id":87380613,"name":"tech-translation","full_name":"ikcamp/tech-translation","owner":{"login":"ikcamp","id":26807121,"avatar_url":"https://avatars1.githubusercontent.com/u/26807121?v=3","gravatar_id":"","url":"https://api.github.com/users/ikcamp","html_url":"https://github.com/ikcamp","followers_url":"https://api.github.com/users/ikcamp/followers","following_url":"https://api.github.com/users/ikcamp/following{/other_user}","gists_url":"https://api.github.com/users/ikcamp/gists{/gist_id}","starred_url":"https://api.github.com/users/ikcamp/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ikcamp/subscriptions","organizations_url":"https://api.github.com/users/ikcamp/orgs","repos_url":"https://api.github.com/users/ikcamp/repos","events_url":"https://api.github.com/users/ikcamp/events{/privacy}","received_events_url":"https://api.github.com/users/ikcamp/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/ikcamp/tech-translation","description":"技术类文章翻译","fork":false,"url":"https://api.github.com/repos/ikcamp/tech-translation","forks_url":"https://api.github.com/repos/ikcamp/tech-translation/forks","keys_url":"https://api.github.com/repos/ikcamp/tech-translation/keys{/key_id}","collaborators_url":"https://api.github.com/repos/ikcamp/tech-translation/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/ikcamp/tech-translation/teams","hooks_url":"https://api.github.com/repos/ikcamp/tech-translation/hooks","issue_events_url":"https://api.github.com/repos/ikcamp/tech-translation/issues/events{/number}","events_url":"https://api.github.com/repos/ikcamp/tech-translation/events","assignees_url":"https://api.github.com/repos/ikcamp/tech-translation/assignees{/user}","branches_url":"https://api.github.com/repos/ikcamp/tech-translation/branches{/branch}","tags_url":"https://api.github.com/repos/ikcamp/tech-translation/tags","blobs_url":"https://api.github.com/repos/ikcamp/tech-translation/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/ikcamp/tech-translation/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/ikcamp/tech-translation/git/refs{/sha}","trees_url":"https://api.github.com/repos/ikcamp/tech-translation/git/trees{/sha}","statuses_url":"https://api.github.com/repos/ikcamp/tech-translation/statuses/{sha}","languages_url":"https://api.github.com/repos/ikcamp/tech-translation/languages","stargazers_url":"https://api.github.com/repos/ikcamp/tech-translation/stargazers","contributors_url":"https://api.github.com/repos/ikcamp/tech-translation/contributors","subscribers_url":"https://api.github.com/repos/ikcamp/tech-translation/subscribers","subscription_url":"https://api.github.com/repos/ikcamp/tech-translation/subscription","commits_url":"https://api.github.com/repos/ikcamp/tech-translation/commits{/sha}","git_commits_url":"https://api.github.com/repos/ikcamp/tech-translation/git/commits{/sha}","comments_url":"https://api.github.com/repos/ikcamp/tech-translation/comments{/number}","issue_comment_url":"https://api.github.com/repos/ikcamp/tech-translation/issues/comments{/number}","contents_url":"https://api.github.com/repos/ikcamp/tech-translation/contents/{+path}","compare_url":"https://api.github.com/repos/ikcamp/tech-translation/compare/{base}...{head}","merges_url":"https://api.github.com/repos/ikcamp/tech-translation/merges","archive_url":"https://api.github.com/repos/ikcamp/tech-translation/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/ikcamp/tech-translation/downloads","issues_url":"https://api.github.com/repos/ikcamp/tech-translation/issues{/number}","pulls_url":"https://api.github.com/repos/ikcamp/tech-translation/pulls{/number}","milestones_url":"https://api.github.com/repos/ikcamp/tech-translation/milestones{/number}","notifications_url":"https://api.github.com/repos/ikcamp/tech-translation/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/ikcamp/tech-translation/labels{/name}","releases_url":"https://api.github.com/repos/ikcamp/tech-translation/releases{/id}","deployments_url":"https://api.github.com/repos/ikcamp/tech-translation/deployments","created_at":"2017-04-06T03:05:56Z","updated_at":"2017-04-13T09:25:16Z","pushed_at":"2017-04-20T10:19:40Z","git_url":"git://github.com/ikcamp/tech-translation.git","ssh_url":"git@github.com:ikcamp/tech-translation.git","clone_url":"https://github.com/ikcamp/tech-translation.git","svn_url":"https://github.com/ikcamp/tech-translation","homepage":null,"size":77,"stargazers_count":1,"watchers_count":1,"language":null,"has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":2,"forks":0,"open_issues":2,"watchers":1,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/ikcamp/tech-translation/pulls/6"},"html":{"href":"https://github.com/ikcamp/tech-translation/pull/6"},"issue":{"href":"https://api.github.com/repos/ikcamp/tech-translation/issues/6"},"comments":{"href":"https://api.github.com/repos/ikcamp/tech-translation/issues/6/comments"},"review_comments":{"href":"https://api.github.com/repos/ikcamp/tech-translation/pulls/6/comments"},"review_comment":{"href":"https://api.github.com/repos/ikcamp/tech-translation/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/ikcamp/tech-translation/pulls/6/commits"},"statuses":{"href":"https://api.github.com/repos/ikcamp/tech-translation/statuses/3d39d579f5ac13561ff3e2079708f0a3fdc8a8c5"}}}}
{"actor":{"display_login":"beyondghx"}}