Dorper Not Applicable


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:
grid-template-areas:
    '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">
    <tbody>
        <tr>
            <td colspan="2" id="header"><h1>Dank Site</h1></td>
        </tr>
        <tr>
            <td id="aside" width="15%">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Memes</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </td>
            <td id="main">
                <h1>Home</h1>
                <p>Ok, this site is epic.</p>
            </td>
        </tr>
        <tr>
            <td colspan="2" id="footer"><p>&copy; 2018 Carver Harrison - Original Character Do Not Steal</p></td>
        </tr>
    </tbody>
</table>
This works on all browsers.
NOTE: The author does not condone the use of <table> for layout.

Comments