Is there a way to have 2 groups of columns 50% each in a CSS grid?

Question

I have a CSS grid with 6 columns, but what I would like is to have 2 groups of 3, where each 3 takes up 50% of the width, but each group is "left aligned".

So if I have something like:

#parent {
  width: 100%;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(3, 1fr) repeat(3, 1fr);
}

.cell {
  background-color: yellow;
}

.cell2 {
  background-color: lightblue;
}

<div id="parent">
  <div class="cell">Label 1</div>
  <div class="cell">60</div>
  <div class="cell">44</div>
  <div class="cell2">Label 2 (xxxx)</div>
  <div class="cell2">80</div>
  <div class="cell2">11</div>
</div>

Can also see in this plunkr

This will give me:

But I would like:

So each "group" (group 1 being the 1st 3 columns, group 2 being the last 3) has cells of min-content so they will grow as needed within their 50% width.

This is a simple example, in my real the number of divs is a list in an Angular component with an *ngFor in the markup, so I don't know the total divs in advance (I do know they are always in groups of 3 cells)

Is this possible with a single grid?

Update 1

In trying to make my example simple (compared to in my app), I think I over simplified (my mistake).

It is a table I wish to show, so it may have many rows, so this does mean the solutions below that use the nested divs won't quite layout correct when there are more than 1 row with labels of different widths.

So if I have (from one of the solutions below):

 <div id="parent">
  <!-- first row -->
  <div class="cell cell1">
    <div>Label 1</div>
    <div>60</div>
    <div>44</div>
  </div>
  <div class="cell cell2">
    <div>Label 2 (xxxx)</div>
    <div>80</div>
    <div>11</div>
  </div>

  <!-- second row -->
  <div class="cell cell1">
    <div>Label3 xxx</div>
    <div>60</div>
    <div>44</div>
  </div>
  <div class="cell cell1">
    <div>Label4 1xxx</div>
    <div>60</div>
    <div>44</div>
  </div>
</div>

#parent {
  width: 100%;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
}

.cell {
  display: flex;
  gap: 1rem; 
}

.cell1{
  background-color: yellow;
}

.cell2 {
  background-color: lightblue;
}

We can see the columns won't be aligned (as in a table):

Answer 1

A mix of grid and flex is also a good solution.

#parent {
  width:100%;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(2, 1fr);
}

.cell-left, .cell-right {
  width:100%;
}

.cell-left {
  background-color: yellow;
}
.cell-right {
  background-color: lightblue;
}

.flex {
  display: flex;
  gap: 10px;
}

<div id="parent">
  <div class="flex cell-left">
    <div class="cell">Label 1</div>
    <div class="cell">60</div>
    <div class="cell">44</div>    
  </div>
  <div class="flex cell-right">
    <div class="cell2">Label 2 (xxxx)</div>
    <div class="cell2">80</div>      
    <div class="cell2">11</div>      
  </div>
</div>

Answer 2

#container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: start;
}
.child-row{

display:flex;
padding-left:10px;
padding-right:10px;
}

<div id="container">
 
  <div class="child-row">
  <div>first--->  1.1</div>
  <div>content 1.2</div>            
  <div>content 1.3</div>
  </div>
  <div class="child-row">
  <div>content 1.1</div>
  <div>content 1.2</div>
  <div>content 1.3</div>
  </div>

 <div class="child-row">
 <div>second--->  2.1</div>
 <div>content 2.2</div>    
 <div>content 2.3</div>
 </div>
  <div class="child-row">
  <div>content 2.1</div>
  <div>content 2.2</div>
  <div>content 2.3</div>
  </div> 

  <div class="child-row">
  <div>third--->  3.1</div>
  <div>content 3.2</div>    
  <div>content 3.3</div>   
  </div>
  <div class="child-row">
  <div>content 3.1</div>
  <div>content 3.2</div>
  <div>content 3.3</div>
  </div>
</div>