W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: dodgerblue;
  padding: 10px;
}

.grid-container > div {
  background-color: #f1f1f1;
  color:#000;
  padding: 10px;
  font-size: 30px;
  text-align: center;
}

/* place in row 1 column 3 */
.item1 {grid-area: 1 / 3;}

/* place in row 2 column 3 */
.item2 {grid-area: 2 / 3;}

/* place in row 1 column 1 */
.item3 {grid-area: 1 / 1;}

/* place in row 1 column 2 */
.item4 {grid-area: 1 / 2;}

/* place in row 2 column 1 */
.item5 {grid-area: 2 / 1;}

/* place in row 2 column 2 */
.item6 {grid-area: 2 / 2;}
</style>
</head>
<body>

<h1>Grid Items in Specific Order</h1>

<p>The grid items do not have to be displayed in the same order as they are written in the HTML code.</p>

</body>
</html>

​x
 
<!DOCTYPE html><html><head><style>.grid-container {  display: grid;  grid-template-columns: auto auto auto;  gap: 10px;  background-color: dodgerblue;  padding: 10px;}​.grid-container > div {  background-color: #f1f1f1;  color:#000;  padding: 10px;  font-size: 30px;  text-align: center;}​/* place in row 1 column 3 */.item1 {grid-area: 1 / 3;}​/* place in row 2 column 3 */.item2 {grid-area: 2 / 3;}​/* place in row 1 column 1 */.item3 {grid-area: 1 / 1;}​/* place in row 1 column 2 */.item4 {grid-area: 1 / 2;}​/* place in row 2 column 1 */.item5 {grid-area: 2 / 1;}​/* place in row 2 column 2 */.item6 {grid-area: 2 / 2;}</style></head><body>​<h1>Grid Items in Specific Order</h1>​<p>The grid items do not have to be displayed in the same order as they are written in the HTML code.</p>​