Add row to hexagon grid

Question

I am trying to add a few rows to my hexagon grid, the ideal situation would be if the grid looks something like this: https://i.stack.imgur.com/T9Bw1.jpg

I know I have to change something in this, but I can't seem to figure out what to do exactly:

.hex {
 width: 17.6%; /* = (100-4) / 5 */
 padding-bottom: 20.3227%; /* =  width / sin(60deg) */
}
.hex:nth-child(9n+6),
.hex:nth-child(9n+7),
.hex:nth-child(9n+8),
.hex:nth-child(9n+9) {
    margin-top: -6.2%;
    margin-bottom: -6.2%;
    -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
        -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
            transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
.hex:nth-child(9n+6):last-child,
.hex:nth-child(9n+7):last-child,
.hex:nth-child(9n+8):last-child,
.hex:nth-child(9n+9):last-child {
    margin-bottom: 0;
}
.hex:nth-child(9n+10) {
    margin-left: 0.0%;
    clear: left;
}
.hex:nth-child(9n+10) {
    clear: left;
}
.hex:nth-child(9n+2),
.hex:nth-child(9n+ 7) {
    margin-left: -0.4%;
    margin-right: -0.4%;
}
.hex:nth-child(9n+3),
.hex:nth-child(9n+4),
.hex:nth-child(9n+8) {
    margin-right: -0.3%;
}

How can I add rows or achieve the result from my design?

Here is a JSFiddle: https://jsfiddle.net/marijnroukens/a4xvLeon/1/

Thanks in advance!