I have a grid layout for my entire site that uses 12 columns
and I want to have 3 items with each taking 3 col and distribute the renaming space between them,
something like justify-content: space-between is css flex

I understand I can do that without css grid, was just wondering if

I can do that with css grid
I want to achieve something like this

html

<div class="grid">
  <div class="grid__item">1</div>
  <div class="grid__item">2</div>
  <div class="grid__item">3</div>
</div>

css

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  width: 100%;
  gap: 10px;
  justify-content: space-between;
}

.grid__item {
  grid-column: span 3;
}

.grid__item:nth-child(1) {
  background: red;
}

.grid__item:nth-child(2) {
  background: lightblue;
}

.grid__item:nth-child(3) {
  background: lightgreen;
}