Revision history [back]

To change the order of columns in CSS Grid Layout, you can use the grid-template-columns property along with the grid-template-areas and grid-column properties.

1. Define the grid layout: Define the number of columns and rows in the grid using the grid-template-columns and grid-template-rows properties.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
}

1. Define the positions of the columns: Use the grid-template-areas property to define the template areas for your grid. Here, we're defining three columns with the areas left, center, and right.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "left center right";
}

1. Position the items within the grid: Use the grid-area property to position items within the grid. Here, we're positioning an item with grid-column: 3/4 to the right template area.

.item {
  grid-area: right;
  grid-column: 3/4;
}

1. Change the column order: Use the order property to change the order of the columns. Here, we're setting order: 3 on the left template area to move it to the end of the grid.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "center right left";
}
.left {
  order: 3;
}

This will move the items in the left area to be displayed at the end, and the center area to be displayed in the beginning.