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>