Rearrange CSS Grid Columns

Introduction

CSS Grid provides a flexible layout system for web content, including the ability to control the order and positioning of columns. This question delves into changing the column order within a CSS grid.

Grid-template-areas Property

One method for rearranging grid columns is via the grid-template-areas property. This allows you to define specific areas within the grid and assign columns to those areas. For instance:

.my-grid {
  grid-template-areas:
    "col3 col1"
    "col3 col2";
}

This would move the col3 element to the beginning of the row, followed by the col1 element.

Line-based Placement

You can also use line-based placement to control column order. This involves placing grid items one after another along the grid lines, with the "grid-column-start" and "grid-column-end" properties determining the start and end locations.

For example, to position the col3 element after the col1 element:

.col3 {
  grid-column-start: 2;
}

Order Property

The order property sets the order of grid items within a track. Values lower than 0 place the item before the track start, while values greater than 0 place it after the track end.

To move the col3 element to the first position:

.col3 {
  order: -1;
}

Dense Function

The dense function of the grid-auto-flow property can also be used to rearrange grid columns. It aligns items in available space, starting from the beginning of the grid container, skipping any empty grid cells.

To move the col3 element to the start of the second row:

.my-grid {
  grid-auto-flow: dense 1fr;
}
.col3 {
  grid-column: 3;
  grid-row: 2;
}

By implementing these techniques, you can dynamically rearrange grid columns to meet the desired layout requirements on different screen sizes or device orientations.