is it possible to add 1fr padding to a grid element in css?

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 40px;
  color: white;
}

.grid__col { }

.grid__col.grid__col--a {
  grid-column: span 6;
  padding:0 calc((100% - 5*40px)/6);   /* 100% = 6fr + 5 gaps ==> 1fr = (100% - 5 gaps)/6 */
  background: navy;
}

.grid__col.grid__col--b {
  grid-column: span 4;
  background: grey;
}

<div class="grid">
  <div class="grid__col grid__col--a">A</div>
  <div class="grid__col grid__col--b">B</div>
</div>