CSS Grid Example

// WHERE THE GRID MAGIC WILL HAPPEN
.grid {
    display: grid;
    
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-auto-flow: dense;
 
}
 
.grid__item {
    min-height: 10vh;
    grid-column: span 2;
    
    &:nth-child(2n) {
        grid-column: span 1;
        background-color: mediumaquamarine;
    }
    
    
    &:nth-child(4) {
        background-color: tomato;
        grid-row: 3 / span 4;
        grid-column: span 4;
    }
    &:nth-child(10) {
        background-color: lightblue;
        grid-column: span 5;
        grid-row: span 2;
    }
}
 
 
 
 
// NO GRID CONTENT HERE; ALL FOR THE PRETTY
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
 
body {
    font-family: 'Open Sans', sans-serif;
    padding: 10px 0;
    background-color: #eff6e0;
    font-size: 18px;
}
 
h1 {
    text-align: center;
    font-size: calc(1em + 3vw);
    margin: 0 0 calc(.3em + 2vw);
}
$exampleColor: #5eb1bf;
 
.grid__item {
    // To show grid items for our example
    height: 100%;
    width: 100%;
    background-color: $exampleColor;
    margin: calc(.5vw + 5px) 0;
    border: 1px solid darken($exampleColor, 25%);
    box-sizing: border-box;
}
 
 

CSS Grid Simple Example

<div class="grid__item">
 
    2
</div>
 
<div class="grid__item">
 
    3
</div>
 
<div class="grid__item">
    4
</div>
 
<div class="grid__item">
    5
</div>
 
<div class="grid__item">
    6
</div>
 
<div class="grid__item">
    7
 
</div>
 
<div class="grid__item">
    8
 
</div>
 
<div class="grid__item">
    9
 
</div>
 
<div class="grid__item">
    10
 
</div>
 
<div class="grid__item">
    11
 
</div>
 
<div class="grid__item">
    12
</div>
 
<div class="grid__item">
    13
 
</div>
 
<div class="grid__item">
    14
 
</div>
 
<div class="grid__item">
    15
 
</div>
 
<div class="grid__item">
    16
 
</div>
 
<div class="grid__item">
    17
 
</div>
 
<div class="grid__item">
    18
</div>
 
<div class="grid__item">
 
    19
</div>
 
<div class="grid__item">
    20
 
</div>
 
<div class="grid__item">
    21
 
</div>
 
<div class="grid__item">
    22
 
</div>
 
<div class="grid__item">
    23
</div>
 
<div class="grid__item">
    24
 
</div>
 
<div class="grid__item">
    25
 
</div>
 
<div class="grid__item">
 
    26
</div>
 
<div class="grid__item">
    27
 
</div>
 
<div class="grid__item">
    28
 
</div>
 
<div class="grid__item">
    29
</div>
<div class="grid__item">
    30
</div>