Created
April 16, 2021 14:26
-
-
Save energylevels/fae964626d258df7357bfa6ef2b30f50 to your computer and use it in GitHub Desktop.
[CSS Grid Examples For IE 11] CSS Grid Support For IE 11 With Prefixes #css #html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en" > | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Basic CSS Grid With IE 11 Support</title> | |
| <script> | |
| //If you want to detect IE 11 with javascript and serve up an alternative stylesheet for example: | |
| if(window.msCrypto) { | |
| // Do some IE11 specific stuff | |
| } | |
| </script> | |
| <style> | |
| /* you can use autoprefixer to add the -ms prefixed properties for-columns and rows | |
| /* however we need to create our own gutter for IE as it does NOT support grip-gap, grid-row-gap or grid-column-gap*/ | |
| .container { | |
| display: -ms-grid; | |
| display: grid; | |
| grid-gap: 1rem; | |
| -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr; /* add 1rem column guttering */ | |
| -ms-grid-rows: 1fr 1rem 1fr 1rem 1fr; /* add 1rem row guttering */ | |
| grid-template-columns: 1fr 1fr 1fr; | |
| background-color: #fff; | |
| color: #444; | |
| } | |
| .box { | |
| background-color: darkblue; | |
| color: #fff; | |
| border-radius: 10px; | |
| padding: 10px; | |
| font-size: 4rem; | |
| text-align: center; | |
| } | |
| /* With new browsers CSS Grid sibling containers are automatically placed and looped. IE doesn't support this so we need to explicitly set the position of each container */ | |
| /*notice we skip a row and column to take into account the guttering for IE */ | |
| .one { | |
| -ms-grid-row: 1; | |
| -ms-grid-column: 1; | |
| } | |
| .two { | |
| -ms-grid-row: 1; | |
| -ms-grid-column: 3; | |
| } | |
| .three { | |
| -ms-grid-row: 1; | |
| -ms-grid-column: 5; | |
| } | |
| .four { | |
| -ms-grid-row: 3; | |
| -ms-grid-column: 1; | |
| } | |
| .five { | |
| -ms-grid-row: 3; | |
| -ms-grid-column: 3; | |
| } | |
| .six { | |
| -ms-grid-row: 3; | |
| -ms-grid-column: 5; | |
| } | |
| .seven { | |
| -ms-grid-row: 5; | |
| -ms-grid-column: 1; | |
| } | |
| .eight { | |
| -ms-grid-row: 5; | |
| -ms-grid-column: 3; | |
| } | |
| .nine { | |
| -ms-grid-row: 5; | |
| -ms-grid-column: 5; | |
| } | |
| /* NOTE: IE 11 also supports -ms-grid-column-span and -ms-grid-row-span to explicity define coverage */ | |
| /* IE 11 also supports -ms-grid-row-align | -ms-grid-column-align (euqivelant to align-self and justify-self in current CSS Grid spec for aligning horizontally and vertically */ | |
| </style> | |
| </head> | |
| <body> | |
| <?php | |
| // If you want to detect IE 11 and serve up IE 11 specefic content, here is PHP detection | |
| if ( strpos($_SERVER['HTTP_USER_AGENT'], 'rv:11.0') !== false | |
| && strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0;') !== false) | |
| { | |
| // Do IE 11 specific stuff here | |
| } | |
| ?> | |
| <div class="container"> | |
| <div class="box one">1</div> | |
| <div class="box two">2</div> | |
| <div class="box three">3</div> | |
| <div class="box four">4</div> | |
| <div class="box five">5</div> | |
| <div class="box six">6</div> | |
| <div class="box seven">7</div> | |
| <div class="box eight">8</div> | |
| <div class="box nine">9</div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment