| <!DOCTYPE html> |
| <link href="resources/grid.css" rel="stylesheet"> |
| <style> |
| .grid { |
| grid-template-columns: [a] 50px [b] 50px [c] 50px [d]; |
| grid-auto-rows: 20px; |
| grid-auto-columns: 20px; |
| } |
| </style> |
| |
| <div class="grid"> |
| |
| <div style="grid-column: 1 / 3; background-color: gray"></div> |
| <div style="grid-column: 1 / -2; background-color: purple"></div> |
| <div style="grid-column: -2 / 4; background-color: orange"></div> |
| |
| <div style="grid-column: 2 / d; background-color: gray"></div> |
| <div style="grid-column: b / -1; background-color: purple"></div> |
| <div style="grid-column: c / d; background-color: orange"></div> |
| |
| <div style="grid-column: a -1 / 3; background-color: gray"></div> |
| <div style="grid-column: b 1 / -1; background-color: purple"></div> |
| <div style="grid-column: c -1 / d; background-color: orange"></div> |
| |
| <div style="grid-column: 2 / 3; background-color: blue"></div> |
| <div style="grid-column: 1 / 3; background-color: lightblue"></div> |
| <div style="grid-column: 2 / 4; background-color: maroon"></div> |
| |
| <div style="grid-column: -3 / -3; background-color: lightgreen"></div> |
| <div style="grid-column: 3 / 3; background-color: green"></div> |
| |
| </div> |
