Line based placement method can be used to create CSS grid with columns of unequal height and width. .grid-container { display: grid; grid-template-columns: auto auto auto; grid-template-rows: repeat(10, 1fr); grid-gap: 5px; padding: 5px; height: 100vh; background-color: #2196F3; } /* line-based placement */ .item1 { grid-column: 1 / 2; grid-row: 1 / 4; } .item2 {… Continue reading How to create CSS grid with columns of unequal height and width