(2) CSS Grid: Creating an Explicit Item That Spans Two (or more) Grid Areas

November, 2020

Grids are wonderful, but very few items fit perfectly within a single grid area.

Grid items are not constrained to fit within a single grid area!

Consider the image above. This grid consists of 3 row tracks and 2 column tracks; there are six grid areas. However, the area labeled 1 covers two separate grid areas, as does the area labeled 4.

.item1 {
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 1;
	grid-column-end: 3;
	width: 100%;
	height: 100%;
}

In .item1, grid-column-start: 1; and grid-column-end: 3; provide a solution. .item1 is explicitly sized to cover two grid areas (side by side)!

(Please note that grid also supports a shorthand way of doing this; it’s much easier!)

.item4 {
	grid-row-start: 2;
	grid-row-end: 4;
	grid-column-start: 2;
	grid-column-end: 3;
	width: 100%;
	height: 100%;                            
}

.item4 follows a similar pattern. grid-row-start: 2; and grid-row-end: 4; define an area that explicitly uses two grid areas, one above the other.