CSS Grid Template example easy to understand

# HTML

<div class="container">
  <div class="box">box 1</div>
  <div class="box">box 2</div>
  <div class="box">box 3</div>
  <div class="box">box 4</div>
  <div class="box">box 5</div>
  <div class="box">box 6</div>
  <div class="box">box 7</div>
  <div class="box">box 8</div>
  <div class="box">box 9</div>
  container
</div>

# CSS

.container {
  border: 4px solid red;
  justify-content: center;
  width: 100%;
  padding: 20px;

  display: grid;
  grid-template-columns: 100px 200px 300px; /*define column width, start from box 1, 2, 3 represent by blue border top side of box */  grid-template-rows: 250px 150px 50px; /* define row height, start from box 1, 4, 7 represent by orange border on left side of box*/  grid-gap: 15px;
}
.box {
  border: 4px solid grey;
  padding: 5px;
  border-top: 4px solid blue;
  border-left: 4px solid orange;
  font-weight: bold;
}