{"action":"closed","issue":{"url":"https://api.github.com/repos/postcss/autoprefixer/issues/1148","repository_url":"https://api.github.com/repos/postcss/autoprefixer","labels_url":"https://api.github.com/repos/postcss/autoprefixer/issues/1148/labels{/name}","comments_url":"https://api.github.com/repos/postcss/autoprefixer/issues/1148/comments","events_url":"https://api.github.com/repos/postcss/autoprefixer/issues/1148/events","html_url":"https://github.com/postcss/autoprefixer/issues/1148","id":372085227,"node_id":"MDU6SXNzdWUzNzIwODUyMjc=","number":1148,"title":"[css-grid] Autoplacement","user":{"login":"evandiamond","id":13557274,"node_id":"MDQ6VXNlcjEzNTU3Mjc0","avatar_url":"https://avatars1.githubusercontent.com/u/13557274?v=4","gravatar_id":"","url":"https://api.github.com/users/evandiamond","html_url":"https://github.com/evandiamond","followers_url":"https://api.github.com/users/evandiamond/followers","following_url":"https://api.github.com/users/evandiamond/following{/other_user}","gists_url":"https://api.github.com/users/evandiamond/gists{/gist_id}","starred_url":"https://api.github.com/users/evandiamond/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/evandiamond/subscriptions","organizations_url":"https://api.github.com/users/evandiamond/orgs","repos_url":"https://api.github.com/users/evandiamond/repos","events_url":"https://api.github.com/users/evandiamond/events{/privacy}","received_events_url":"https://api.github.com/users/evandiamond/received_events","type":"User","site_admin":false},"labels":[{"id":31855287,"node_id":"MDU6TGFiZWwzMTg1NTI4Nw==","url":"https://api.github.com/repos/postcss/autoprefixer/labels/enhancement","name":"enhancement","color":"84b6eb","default":true}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":25,"created_at":"2018-10-19T19:22:34Z","updated_at":"2018-12-05T13:01:30Z","closed_at":"2018-12-05T13:01:30Z","author_association":"NONE","body":"There's an issue with IE11 and Edge if using `grid-gap`, where the proper `-ms-` prefixes and additions aren't added. There's a mixin (linked below), which makes things better, however the author @ksenzee mentioned it needs to be more generalized.\r\n\r\n**Grid Gap IE fix mixin:**\r\nhttps://gist.github.com/ksenzee/276d60f3e251b1dfafaf52ed8dbdb0de\r\n\r\n**Codepen** created to illustrate issue:\r\nhttps://codepen.io/hyperfy/pen/ReyzdY (editor mode isn't working in IE)\r\nhttps://codepen.io/hyperfy/full/ReyzdY\r\n\r\nHow code should look:\r\n\r\n```\r\n.grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr 1fr;\r\n    -ms-grid-columns: 1fr 30px 1fr 30px 1fr;\r\n    grid-template-rows: auto;\r\n    grid-gap: 30px;\r\n\r\n    > *:nth-child(1) {\r\n        grid-column: 1;\r\n        grid-row: 1;\r\n        -ms-grid-column: 1;\r\n        -ms-grid-row: 1;\r\n    }\r\n\r\n    > *:nth-child(2) {\r\n        grid-column: 2;\r\n        grid-row: 1;\r\n        -ms-grid-column: 3;\r\n        -ms-grid-row: 1;\r\n    }\r\n\r\n    > *:nth-child(3) {\r\n        grid-column: 3;\r\n        grid-row: 1;\r\n        -ms-grid-column: 5;\r\n        -ms-grid-row: 1;\r\n    }\r\n}\r\n```\r\n\r\nBasically, the grid children (or columns) need to be properly mapped out as IE11 sees each gap as an additional column. Columns must be moved to accommodate IE11.\r\n\r\nHow can we integrate this into Autoprefixer? I think it's a life-saver and an important step forward for CSSGrid adoption in terms of browser compatibility.\r\n\r\nThank you so much!"}}
{"actor":{"display_login":"ai"}}