<div class="grid">
    <div class="grid__item grid__item--fixed">Item 1 - FIXED</div>
    <div class="grid__item">Item 2</div>
    <div class="grid__item grid__item--big">Item 3</div>
    <div class="grid__item grid__item--tall">Item 4</div>
    <div class="grid__item grid__item--tall">Item 5</div>
    <div class="grid__item">Item 6</div>
    <div class="grid__item grid__item--wide">Item 7</div>
    <div class="grid__item">Item 8</div>
    <div class="grid__item">Item 9</div>
    <div class="grid__item grid__item--wide">Item 10</div>
    <div class="grid__item grid__item--tall">Item 11</div>
    <div class="grid__item">Item 12</div>
    <div class="grid__item grid__item--big">Item 13</div>
    <div class="grid__item grid__item--wide">Item 14</div>
    <div class="grid__item grid__item--wide">Item 15</div>
    <div class="grid__item">Item 16</div>
    <div class="grid__item grid__item--tall">Item 17</div>
    <div class="grid__item">Item 18</div>
    <div class="grid__item">Item 19</div>
    <div class="grid__item">Item 20</div>
    <div class="grid__item grid__item--big">Item 21</div>
    <div class="grid__item grid__item--wide">Item 22</div>
    <div class="grid__item">Item 23</div>
    <div class="grid__item grid__item--tall">Item 24</div>
    <div class="grid__item">Item 25</div>
    <div class="grid__item">Item 26</div>
    <div class="grid__item">Item 27</div>
    <div class="grid__item">Item 28</div>
    <div class="grid__item grid__item--wide">Item 29</div>
    <div class="grid__item">Item 30</div>
    <div class="grid__item">Item 31</div>
    <div class="grid__item">Item 32</div>
    <div class="grid__item">Item 33</div>
    <div class="grid__item grid__item--big">Item 34</div>
    <div class="grid__item grid__item--wide">Item 35</div>
    <div class="grid__item">Item 36</div>
    <div class="grid__item">Item 37</div>
    <div class="grid__item">Item 38</div>
    <div class="grid__item">Item 39</div>
    <div class="grid__item">Item 40</div>
    <div class="grid__item grid__item--wide">Item 41</div>
    <div class="grid__item grid__item--tall">Item 42</div>
    <div class="grid__item">Item 43</div>
    <div class="grid__item">Item 44</div>
    <div class="grid__item">Item 45</div>
    <div class="grid__item grid__item--big">Item 46</div>
    <div class="grid__item">Item 47</div>
    <div class="grid__item">Item 48</div>
    <div class="grid__item grid__item--tall">Item 49</div>
    <div class="grid__item">Item 50</div>
    <div class="grid__item">Item 51</div>
    <div class="grid__item grid__item--tall">Item 52</div>
    <div class="grid__item">Item 53</div>
    <div class="grid__item">Item 54</div>
    <div class="grid__item">Item 55</div>
</div>
* {
    box-sizing: border-box;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); // Fill, keeps 50px and creates empty tracks
    grid-gap: 1em;
    grid-auto-flow: dense;
    
    margin: 1rem 0;
}

.grid--fit {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); // Fit, fills space if space left
}

.grid__item {
    display: block;
    padding: 2em;
    
    font-size: 1.2rem;
    color: #f5f5f5;
    text-align: center;
    background: #82C7EB;
}

.grid__item--wide {
    grid-column-end: span 2;
    
    background: #F5FAC8;
    color: #8EA1F0;
}

.grid__item--big {
    grid-column-end: span 2;
    grid-row-end: span 2;
    
    background: #8EA1F0;
    color: #F5FAC8;
}

.grid__item--tall {
    grid-row-end: span 2;
    
    background: #A5F0E4;
    color: #82C7EB;
}

.grid__item--fixed {
    grid-row: 4;
    grid-column: 1 / -1;
    background: #BC4F4F;
}

.title {
    margin: 4rem 0 2rem;
    padding: 0 1em;
 
    color: #8EA1F0;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.