css display grid
.parent{
display: grid;
grid-template-columns: repeat(3, 250px);
/*
instead of writing 250px 250px 250px 3 times, we use repeat(number of columns, width) function
*/
grid-template-rows: repeat(3, 400px);
}
.parent .child-1{
grid-column: 2 / 4; /* Start at column 2 and end at column 3, 4 not counted [not inlcuded]*/
grid-row: span 2; /* take only 2 rows. can be written also as [grid-row: 1 / 3]*/
}
.parent .child-2{
grid-column: span 3;
grid-row: 1 / 3; /* 2 rows */
}
/*
ShortHand
grid-column: grid-column-start grid-column-end
grid-row: grid-row-start grid-row-end
Example:
*grid-column: 2 / 8; start at 2 and end at 8-1 = 7
=> grid-column-start = 2, grid-column-end = 7
*/