Rearrange items with `grid-template-areas`

You can arrange items with the css-grid property grid-template-areas without changing the structure of your html.

Here I have basic strategy for a 2x2 grid with item one in the upper left corner and item four in the lower right.

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-tempate-areas: 
    "one two"
    "three four";
}

.one { grid-area: one }
.two { grid-area: two }
.three { grid-area: three }
.four { grid-area: four }

I can rearrange my items just by changing the grid-template-areas property:

.container {
  grid-template-areas:
    "four two"
    "three one";
}

Now, item four is in the upper left corner, and item one is in the lower right.

A complete example is up at CodePen

Tweet