CSS Grid Play Around

Hello, I'm a CSS grid! Make me dance!

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Attack of the 600px Grid</title>
  <style>
body {
  color: white;
  text-align: center;
}

.container { 
  height: 600px;
  position: relative;
  border: 3px white; 
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

  <div class="container" text-align: center>  
     <div class="item1">1</div>  
     <div class="item2">2</div>  
     <div class="item3">3</div>  
     <div class="item4">4</div>  
     <div class="item5">5</div>  
     <div class="item6">6</div>
     <div class="item7">7</div>  
     <div class="item8">8</div>  
     <div class="item9">9</div>
</div>

</body>
</html>

CSS

.container { display: grid; grid-template-columns: 5rem 5rem 5rem; grid-template-rows: 5rem 5rem 5rem; grid-gap: 5rem; font-family: sans-serif;
  font-size: 15pt; background-color: #ffd1dc;}
  
  .item2 { grid-column: span 2; }
  .item6 { grid-column: span 1; grid-column-start: 1; grid-column-end: 4; }