Сan someone tell me how to make this example work in ie11? I checked the documentation and -ms-
prefix did not help
#page {
display: -ms-grid;
display: grid;
width: 100%;
height: 250px;
grid-template-areas: "head head" "nav main" "nav foot";
-ms-grid-rows: 50px 1fr 30px;
grid-template-rows: 50px 1fr 30px;
-ms-grid-columns: 150px 1fr;
grid-template-columns: 150px 1fr;
}
#page > header {
grid-area: head;
background-color: #8ca0ff;
}
#page > nav {
grid-area: nav;
background-color: #ffa08c;
}
#page > main {
grid-area: main;
background-color: #ffff64;
}
#page > footer {
grid-area: foot;
background-color: #8cffa0;
}
Example: https://jsfiddle.net/9bp1ffs1/
To make it compatible with IE and other modern browsers, you can detect IE in css using media queries and use the css as IE specific. You can also check this more complete example: jsfiddle.net/1j0uc6ys.
What you might not know, is that CSS Grid was first supported in IE 10. In this post I will teach you how to support CSS Grid in IE 10 and above, while using the old CSS Grid syntax, without the need to know the old prefixes of IE CSS Grid.
BROWSER SUPPORT FOR CSS Grid Layout Chrome version 4 to 28 doesn't supports CSS Grid Layout This property is not supported by default but can be enabled by Chrome 29 to 56 version. Enabled in Chrome through the "experimental Web Platform features" flag in chrome://flags.
The grid-area CSS shorthand property specifies a grid item's size and location within a grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.
There are 2 specific problems here. Firstly, IE10 and 11 and all versions of Edge up to v15 do not support Grid Areas. Any code for those browsers must use Grid Lines instead (which is a pity, as Grid Areas are more intuitive to most). And secondly, IE11 does not fully support the main HTML tag. In this case, IE11 will not properly place or style a main tag in a grid layout.
Working fork of your example here, using Grid Lines for both IE/Edge and W3C Models: https://jsfiddle.net/FilmFiddler/q074gpx8/4/
#page {
display: -ms-grid;
display: grid;
width: 100%;
height: 250px;
-ms-grid-rows: 50px 1fr 30px;
grid-template-rows: 50px 1fr 30px;
-ms-grid-columns: 150px 1fr;
grid-template-columns: 150px 1fr;
}
#page > header {
-ms-grid-column: 1;
-ms-grid-column-span: 2;
-ms-grid-row: 1;
grid-column: 1/3;
grid-row: 1;
background-color: #8ca0ff;
}
#page > nav {
-ms-grid-column: 1;
-ms-grid-row: 2;
-ms-grid-row-span: 2;
grid-column: 1;
grid-row: 2/4;
background-color: #ffa08c;
}
#page #main {
-ms-grid-column: 2;
-ms-grid-row: 2;
grid-column: 2;
grid-row: 2;
background-color: #ffff64;
}
#page > footer {
-ms-grid-column: 2;
-ms-grid-row: 3;
grid-column: 2;
grid-row: 3;
background-color: #8cffa0;
}
HTML, with main tag replaced by a div:
<section id="page">
<header>Header</header>
<nav>Navigation</nav>
<div id="main">Main area</div>
<footer>Footer</footer>
</section>
Generally, the older CSS Grid Model used by IE and Edge is quite different to the current W3C implementation. Apart from the need for the -ms-prefix, there are considerable differences in the property namings, and as well as not supporting Grid Areas, or Grid Gaps. Also there is no support for the functions like fit_content() and repeat(), although the latter does have a Microsoft-specific implementation.
There is a reference in the MSDN Pages of using Grid Lines in the older Grid Model used by IE/Edge: https://msdn.microsoft.com/en-us/library/hh673533(v=vs.85).aspx
There is a discussion of the differences between the IE/Edge and the W3C Models, including the differences in properties, here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With