Skip to Main Content

Dorper Okay, Now THIS Is Epic

CSS Grid Polyfill

Recently, a new feature in CSS called CSS Grids has been released. However many browsers don't support this new feature. For this reason I have created a Polyfill for CSS Grids that uses no Javascript.
Take a site using this CSS:
    'header header header header header header header header'
    'aside main main main main main main main'
    'footer footer footer footer footer footer footer footer';
It can be rewritten using this HTML
<table id="layout">
            <td colspan="2" id="header"><h1>Dank Site</h1></td>
            <td id="aside" width="15%">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Memes</a></li>
                    <li><a href="#">About</a></li>
            <td id="main">
                <p>Ok, this site is epic.</p>
            <td colspan="2" id="footer"><p>&copy; 2018 Carver Harrison - Original Character Do Not Steal</p></td>
This works on all browsers.
NOTE: The author does not condone the use of <table> for layout.