I have a handy Container component that defines a grid that wraps all children within the middle column, which serves as a max-width container. This component has the option of specifying the child item to break that max-width container and start at the first column and end at the last column.
See this blog post for further explanation: https://cloudfour.com/thinks/breaking-out-with-css-grid-layout/
See this Codepen for example: https://codepen.io/tylersticka/full/wdmymG/
I was confident that'd the old IE 10 and IE 11 spec would have properties to cover the newer spec's properties but I haven't had any luck with in when testing in IE 11. What syntax am I missing or do I need to modify to replicate grid-areas in IE 11?
.grid-container {
display: -ms-grid;
display: grid;
-ms-grid-columns: [full-start] minmax(0, 1fr) [main-start] minmax(0, 1120px) [main-end] minmax(0, 1fr)
[full-end];
grid-template-columns:
[full-start] minmax(0, 1fr) [main-start] minmax(0, 1120px) [main-end] minmax(0, 1fr) [full-end];
> * {
grid-column: main;
padding: 0 16px;
}
}
.full-width {
grid-column: full;
}
Sources:
https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/
https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer/
