Grid Example - step by step

by rulin shyu

HTML

<header class="header">header</header>
<main class="main">main</main>
<aside class="sidebar">sidebar</aside>
<footer class="footer">footer</footer>

SCSS

body {
   display: grid;
   grid-template-columns: 2fr 20px 1fr;
}



// 讓元素有點樣式
body { background-color: #fff; }

%block {
    box-sizing: border-box;
    min-height: 100px;
    border: 5px solid #fff;
    padding: 10px;
    color: #fff;
    font-size: 2.5em;
    text-shadow: 0 0 5px #000;
}
.header  { @extend %block; background-color: #2076e1; }
.main    { @extend %block; background-color: #ffdb00; }
.sidebar { @extend %block; background-color: #c93d3d; }
.footer  { @extend %block; background-color: #5bbb5d; }