Study: CSS Grid Layout

by Travis

HTML

<div class="grd">
    <div class="main">
        <h1>Hello World</h1>    
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quisquam sunt voluptates ab, possimus excepturi nemo odit, voluptatem distinctio eligendi amet architecto at praesentium porro qui ipsum iusto, maxime inventore!</p>
    </div>
    <div class="side">
        <h3>Side</h3>
    </div>
    <div class="hero">
        <h3>Hero</h3>
    </div>
    <div class="foot">
        <h3>Foot</h3>
    </div>
</div>

CSS

body {color:#fff;}

.grd {
     display:grid;
     grid-template-rows: auto;
     grid-template-columns: 100px 100px 100px 100px;
 }
 
.main {
    background:#111;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 3;
}
.side {
    background:#333;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 3;
    grid-column-end: 5;
}
.hero {background:#555;}
.foot {background:#999;}