Style a column as a whole in CSS Grid Layout

Question

I have a CSS Grid with multiple columns as well as multiple rows. Now I don't just want to style a single cell but one column as a whole, e.g. with box-shadow and border-radius.

I want to achieve something like this:

I tried grid-template-areas but it seems that they are not made to style a whole column rather than spanning one cell over the whole column:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "col1 col2 col3" 
    "col1 col2 col3" 
    "col1 col2 col3";
  grid-column-gap: 10px;
  grid-row-gap: 0;
}
.container > div {
  text-align: center;
  padding: 8px;
}
.col1 {
  grid-area: col1;
  background: darkgreen;
  color: white;
  border-radius: 15px;
  box-shadow: 0 0 20px #aaa;
}

<div class="container">
  <div class="col1">col 1</div>
  <div class="col2">col 2</div>
  <div class="col3">col 3</div>
  <div class="col1">col 1</div>
  <div class="col2">col 2</div>
  <div class="col3">col 3</div>
  <div class="col1">col 1</div>
  <div class="col2">col 2</div>
  <div class="col3">col 3</div>
</div>

How it possible to use CSS Grid and style a column as a whole?