.wrapper { background: #e0e0e0; display: grid; grid-template-columns: 100px 10px 100px 10px 100px; grid-template-rows: auto 10px auto; margin: 1em; overflow: auto; .box { box-sizing: border-box; border: 1px dotted #000; background: #666; color: #fff; padding: 20px; } /*.a { background: #f00; } .b { background: #ff0; } .c { background: #f0f; } .d { background: #0ff; } .e { background: #0f0; } .f { background: #00f; }*/ } .wrapper:after { position: absolute; left: .5em; } .ex1 { border: 1px solid #ccc; height: 100px; } .ex1:after { content: "1"; } .ex2 { .a { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; } .b { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } .c { grid-column-start: 5; grid-column-end: 6; grid-row-start: 1; grid-row-end: 2; } .d { grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4; } .e { grid-column-start: 3; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; } .f { grid-column-start: 5; grid-column-end: 6; grid-row-start: 3; grid-row-end: 4; } } .ex2:after { content: "2"; } .ex3 { /* shorthand from ex2 */ .a { grid-column: 1 / 2; grid-row: 1 / 2; } .b { grid-column: 3 / 4; grid-row: 1 / 2; } .c { grid-column: 5 / 6; grid-row: 1 / 2; } .d { grid-column: 1 / 2; grid-row: 3 / 4; } .e { grid-column: 3 / 4; grid-row: 3 / 4; } .f { grid-column: 5 / 6; grid-row: 3 / 4; } } .ex3:after { content: "3"; } .ex4 { /* short-shorthand from ex2 */ /* grid-area: row-start/column-start/row-end/column-end */ .a { grid-area: 1 / 1 / 2 / 2; } .b { grid-area: 1 / 3 / 2 / 4; } .c { grid-area: 1 / 5 / 2 / 6; } .d { grid-area: 3 / 1 / 4 / 2; } .e { grid-area: 3 / 3 / 4 / 4; } .f { grid-area: 3 / 5 / 4 / 6; } } .ex4:after { content: "4"; } .ex5 { .a { grid-column: 1 / 4; grid-row: 1 / 2; } .b { grid-column: 5 / 6; grid-row: 1 / 4; } .c { grid-column: 1 / 2; grid-row: 3 / 4; } .d { grid-column: 3 / 4; grid-row: 3 / 4; } } .ex5:after { content: "5"; } .ex6 { .a { grid-column: 1 / span 3; grid-row: 1 ; } .b { grid-column: 5 ; grid-row: 1 / span 3; } .c { grid-column: 1 ; grid-row: 3 ; } .d { grid-column: 3 ; grid-row: 3 ; } } .ex6:after { content: "6"; } .ex7 { display: grid; grid-template-columns: (col1-start) 100px (col1-end) 10px (col2-start) 100px (col2-end) 10px (col3-start) 100px (col3-end); grid-template-rows: (row1-start) auto (row1-end) 10px (row2-start) auto (row2-end); .a { grid-column: col1-start / col2-end; grid-row: row1-start ; } .b { grid-column: col3-start ; grid-row: row1-start / row2-end; } .c { grid-column: col1-start; grid-row: row2-start ; } .d { grid-column: col2-start ; grid-row: row2-start ; } } .ex7:after { content: "7"; }