{"action":"created","issue":{"url":"https://api.github.com/repos/andypinet/blog/issues/10","repository_url":"https://api.github.com/repos/andypinet/blog","labels_url":"https://api.github.com/repos/andypinet/blog/issues/10/labels{/name}","comments_url":"https://api.github.com/repos/andypinet/blog/issues/10/comments","events_url":"https://api.github.com/repos/andypinet/blog/issues/10/events","html_url":"https://github.com/andypinet/blog/issues/10","id":244980240,"number":10,"title":"css grid超级研究","user":{"login":"andypinet","id":8085758,"avatar_url":"https://avatars2.githubusercontent.com/u/8085758?v=4","gravatar_id":"","url":"https://api.github.com/users/andypinet","html_url":"https://github.com/andypinet","followers_url":"https://api.github.com/users/andypinet/followers","following_url":"https://api.github.com/users/andypinet/following{/other_user}","gists_url":"https://api.github.com/users/andypinet/gists{/gist_id}","starred_url":"https://api.github.com/users/andypinet/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/andypinet/subscriptions","organizations_url":"https://api.github.com/users/andypinet/orgs","repos_url":"https://api.github.com/users/andypinet/repos","events_url":"https://api.github.com/users/andypinet/events{/privacy}","received_events_url":"https://api.github.com/users/andypinet/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-07-24T06:08:18Z","updated_at":"2017-07-24T08:44:24Z","closed_at":null,"body":"```html\r\n<div class=\"grid\">\r\n    <div class=\"grid-item is xs-2-of-12\"></div>\r\n    <div class=\"grid-item is xs-5-of-12\"></div>\r\n    <div class=\"grid-item is xs-5-of-12\"></div>\r\n</div>\r\n<div class=\"grid\">\r\n    <div class=\"grid-item is xs-2-of-12\"></div>\r\n    <div class=\"grid-item is xs-offset-5-of-12 xs-5-of-12\"></div>\r\n</div>\r\n<div class=\"grid\">\r\n    <div class=\"grid-item is xs-2-of-12\"></div>\r\n    <div class=\"grid-item is xs-3-of-12\"></div>\r\n</div>\r\n<div class=\"grid\">\r\n    <div class=\"grid-item is xs-2-of-12\"></div>\r\n    <div class=\"grid-item is xs-offset-3-of-12 xs-5-of-12\"></div>\r\n</div>\r\n<div class=\"grid\">\r\n    <div class=\"grid-item is xs-3-of-12\"></div>\r\n    <div class=\"grid-item is xs-3-of-12\"></div>\r\n    <div class=\"grid-item is xs-3-of-12\"></div>\r\n    <div class=\"grid-item is xs-3-of-12\"></div>\r\n</div>\r\n<div class=\"grid\">\r\n   <div class=\"grid-item is xs-4-of-12\"></div>\r\n   <div class=\"grid-item is xs-4-of-12\"></div>\r\n   <div class=\"grid-item is xs-4-of-12\"></div>\r\n   <div class=\"grid-item is xs-6-of-12\"></div>\r\n   <div class=\"grid-item is xs-6-of-12\"></div>\r\n   <div class=\"grid-item is xs-4-of-12\"></div>\r\n</div>\r\n```\r\n```scss\r\nbody {\r\n  margin: 0;\r\n}\r\n\r\n$media: \"xs\";\r\n$rownum: 12;\r\n$gutter: 10px;\r\n\r\n.grid {\r\n  width: calc(100% + #{$gutter});\r\n  margin-left: -$gutter;\r\n  font-size: 0;\r\n}\r\n\r\n.grid-item {\r\n  display: inline-block;\r\n  height: 30px;\r\n  background-color: #231231;\r\n  margin-left: $gutter;\r\n  font-size: 14px;\r\n  \r\n  @for $i from 1 through $rownum {\r\n    &.is.#{$media}-#{$i}-of-#{$rownum} {\r\n      width: calc(#{1/$rownum*100%*$i} - #{$gutter});\r\n    }   \r\n    &.is.#{$media}-offset-#{$i}-of-#{$rownum} {\r\n      margin-left: calc(#{1/$rownum*100%*$i} + #{$gutter});\r\n    }  \r\n  }\r\n}\r\n```"},"comment":{"url":"https://api.github.com/repos/andypinet/blog/issues/comments/317357598","html_url":"https://github.com/andypinet/blog/issues/10#issuecomment-317357598","issue_url":"https://api.github.com/repos/andypinet/blog/issues/10","id":317357598,"user":{"login":"andypinet","id":8085758,"avatar_url":"https://avatars2.githubusercontent.com/u/8085758?v=4","gravatar_id":"","url":"https://api.github.com/users/andypinet","html_url":"https://github.com/andypinet","followers_url":"https://api.github.com/users/andypinet/followers","following_url":"https://api.github.com/users/andypinet/following{/other_user}","gists_url":"https://api.github.com/users/andypinet/gists{/gist_id}","starred_url":"https://api.github.com/users/andypinet/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/andypinet/subscriptions","organizations_url":"https://api.github.com/users/andypinet/orgs","repos_url":"https://api.github.com/users/andypinet/repos","events_url":"https://api.github.com/users/andypinet/events{/privacy}","received_events_url":"https://api.github.com/users/andypinet/received_events","type":"User","site_admin":false},"created_at":"2017-07-24T08:44:24Z","updated_at":"2017-07-24T08:44:24Z","body":"现在手机都支持flexbox了 会更加简单了\r\n```html\r\n<div class=\"grid\"> <!-- 4 columns with padding -->\r\n  <div class=\"grid-item is xs-3-of-12\">\r\n    1- lorem ipsum<br>Lorem Elsass ipsum lacus leverwurscht Wurschtsalad mamsell Gal. \r\n  </div>\r\n  <div class=\"grid-item is xs-3-of-12\">\r\n    2- lorem ipsum Hopla choucroute !\r\n  </div>\r\n  <div class=\"grid-item is xs-3-of-12\">\r\n    3- lorem ipsum<br>condimentum Verdammi ch'ai ac réchime météor barapli s'guelt quam, non Christkindelsmärik blottkopf, Carola tellus rucksack vielmols, Gal !\r\n  </div>\r\n  <div class=\"grid-item is xs-3-of-12\">\r\n    4- lorem ipsum  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum\r\n  </div>\r\n  <div class=\"grid-item is xs-3-of-12\">\r\n    5- lorem ipsum<br>Yoo ch'ai lu dans les DNA que le Racing a encore perdu contre Oberschaeffolsheim. Verdammi \r\n  </div>\r\n  <div class=\"grid-item is xs-3-of-12\">\r\n    6- lorem ipsum<br>Lorem Elsass ipsum lacus leverwurscht Wurschtsalad mamsell Gal.\r\n  </div>\r\n  <div class=\"grid-item is xs-3-of-12\" style=\"margin-left: auto;\">\r\n    7- simple \"offset\" with <br><code>margin-left: auto</code>\r\n  </div>\r\n</div>\r\n```\r\n```scss\r\n$media: \"xs\";\r\n$rownum: 12;\r\n$gutter: 10px;\r\n\r\n.grid {\r\n\tdisplay: flex;\r\n\tflex-direction: row;\r\n\tflex-wrap: wrap;\r\n\tmargin-left: -30px;\r\n\t\r\n\t/* Inline-block fallback */\r\n  letter-spacing: -0.31em;\r\n  text-rendering: optimizespeed;\r\n}\r\n.grid > .grid-item {\r\n\tflex: 0 0 auto;\r\n\tdisplay: block;  /* IE fix */\r\n  margin-left: 30px;\r\n\t\r\n\t/* Inline-block fallback */\r\n  display: inline-block;\r\n  vertical-align: top;\r\n  letter-spacing: normal;\r\n\ttext-rendering: auto;\r\n}\r\n\r\n.grid-item.is.xs-3-of-12 {\r\n  width: calc(25% - 30px); \r\n\tmargin-left: 30px;\r\n}\r\n\r\n@for $i from 1 through $rownum {\r\n  &.is.#{$media}-#{$i}-of-#{$rownum} {\r\n    width: calc(#{1/$rownum*100%*$i} - #{$gutter});\r\n  }     \r\n}\r\n\r\n* {\r\n  box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n  margin: 0;\r\n}\r\n```"}}
{"actor":{"display_login":"andypinet"}}