Academy / Advanced Level: HTML and CSS

CSS Grid Advanced Features

Grid Item Ordering with grid-row and grid-column

You can control where individual items are placed in the grid by using the grid-row and grid-column properties. These properties let you span items across multiple rows or columns, or specify exactly where they should be placed.

Example:

.grid-item {
  grid-row: 1 / 3; /* Item spans from row 1 to row 3 */
  grid-column: 2 / 4; /* Item spans from column 2 to column 4 */
}