<div class="grid-layout">
    <div class="grid-item grid-item-1">item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 item 1 </div>
    <div class="grid-item grid-item-2">item 2</div>
    <div class="grid-item span-3 grid-item-3">item 3</div>
    <div class="grid-item grid-item-4">item 4</div>
    <div class="grid-item span-2 grid-item-5">item 5</div>
    <div class="grid-item grid-item-6">item 6</div>
    <div class="grid-item grid-item-7">item 7</div>
    <div class="grid-item grid-item-8">item 8</div>
    <div class="grid-item grid-item-9">item 9</div>
    <div class="grid-item span-2 grid-item-10">item 10</div>
    <div class="grid-item grid-item-11">item 11</div>
    <div class="grid-item grid-item-12">item 12</div>
    <div class="grid-item span-2 grid-item-13">item 13</div>
    <div class="grid-item grid-item-14">item 14</div>
    <div class="grid-item grid-item-15">item 15</div>
    <div class="grid-item grid-item-16">item 16</div>
    <div class="grid-item span-3 grid-item-17">item 17</div>
    <div class="grid-item grid-item-18">item 18</div>
    <div class="grid-item grid-item-19">item 19</div>
    <div class="grid-item grid-item-20">item 20</div>
    <div class="grid-item span-2 grid-item-21">item 21</div>
    <div class="grid-item grid-item-22">item 22</div>
    <div class="grid-item grid-item-23">item 23</div>
    <div class="grid-item grid-item-24">item 24</div>
    <div class="grid-item grid-item-25">item 25</div>
    <div class="grid-item span-3 grid-item-26">item 26</div>
    <div class="grid-item grid-item-27">item 27</div>
    <div class="grid-item grid-item-28">item 28</div>
    <div class="grid-item grid-item-29">item 29</div>
    <div class="grid-item grid-item-30">item 30</div>
    <div class="grid-item grid-item-31">item 31</div>
    <div class="grid-item grid-item-32">item 32</div>
    <div class="grid-item grid-item-33">item 33</div>
    <div class="grid-item grid-item-34">item 34</div>
    <div class="grid-item grid-item-35">item 35</div>
    <div class="grid-item grid-item-36">item 36</div>
    <div class="grid-item grid-item-37">item 37</div>
    <div class="grid-item grid-item-38">item 38</div>
    <div class="grid-item grid-item-39">item 39</div>
    <div class="grid-item span-3 grid-item-40">item 40</div>
    <div class="grid-item grid-item-41">item 41</div>
    <div class="grid-item grid-item-42">item 42</div>
    <div class="grid-item grid-item-43">item 43</div>
    <div class="grid-item grid-item-44">item 44</div>
    <div class="grid-item span-3 grid-item-45">item 45</div>
    <div class="grid-item grid-item-46">item 46</div>
    <div class="grid-item grid-item-47">item 47</div>
    <div class="grid-item grid-item-48">item 48</div>
    <div class="grid-item grid-item-49">item 49</div>
    <div class="grid-item grid-item-50">item 50</div>
</div>
// ff nightly or chrome with flags enabled
// https://www.youtube.com/watch?v=Dz9BzY21Zks&list=PLQkVA6z3dFvbnBJetfYDAF3-cG_ubgdZR 
// http://gridbyexample.com/
// Rachel Andrew F.T.W

body {
    font-family: sans-serif;
    background-color: #f2f2f2;
    margin: 0;
}

.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-gap: 1px;
    grid-auto-rows: minmax(180px, auto);
    grid-auto-flow: dense;
    padding: 1px;
   
}

.grid-item {
    padding: 1rem;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    color: #000;
    background-color: #ccc;
    border-radius: 10px;
}

.span-2 {
    grid-column-end: span 2;
    grid-row-end: span 2;
}

.span-3 {
    grid-column-end: span 3;
    grid-row-end: span 4;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.rawgit.com/FremyCompany/css-grid-polyfill/master/bin/css-polyfills.min.js