Can I have a varying number of columns per row in a CSS grid?

Answer 1

You could always try it this way:

CSS

body {
    margin: 2% 35%;
}
.container {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: [col] 100px [col] 100px [col] 100px [col] 100px  ;
    grid-template-rows: [row] auto [row] auto [row] ;
    background-color: #fff;
    color: #444;
}
.col {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;

}
.a {
    grid-column: col / span 2;
    grid-row: row ;
}
.b {
    grid-column: col 3 / span 2 ;
    grid-row: row ;
}
.c {
    grid-column: col ;
    grid-row: row 2 ;
}
.d {
    grid-column: col 2 / span 3 ;
    grid-row: row 2 ;
}
.e {
    grid-column: col / span 4;
    grid-row: row 3;
}

HTML

    
A
    
B
    
C
    
D
    
E

CodePen: https://codepen.io/anon/pen/MOLrvq