Placing Content in Your Post-Apocalyptic Grid - I

The following are some properties used to define an item’s size and location inside a grid.

Gridpocalypse: The start and end

grid-column-start: This sets the column name or number where the element should start.

grid-column-end: This sets the column name or number where the element should end.

grid-row-start: This sets the row name or number where the element should start.

grid-row-end: This sets the row name or number where the element should end.

.zombie-item {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 6;
}

Note: The end values specify the row and column before which the spanning should end. For instance, the above zombie-item will start from the 3rd row and 2nd column and will span all the way till the 5th row and 3rd column.

grid-column: A shorthand property for setting the column start and end.

grid-row: A shorthand property for setting the row start and end.

Note: Add a slash between the start value and the end value.

.zombie-item {
    grid-column: 2 / 4;
    grid-row: 3 / 6;
}

Experiments to try:

1. Try placing different items in different places around the grid.
2. What happens if you use negative numbers? (Hint: Negative numbers are valid, but don’t count from the same direction.)
3. What happens if items overlap?
4. Try using the span keyword.