dynamic css grid layout, keeping some elements on the same line - css

Question

I have started using css grids recently (https://css-tricks.com/snippets/css/complete-guide-grid/) but feel like I'm not fully exploiting them. My question concerns a situation where my displayed data is dynamic. For instance I want to display this:
In short:
each row of data can contain one or two columns
rows are separated by a divider row
data is dynamic, the css grid layout cannot be pre-set
It feels like css grids have a way of doing this (without dynamically generating the css), using repeat etc... but I don't really see how.
This is done under React, some dynamic rows are generated using a map, the code would looks something like this:
return (
<div>
<div> 1A </div>
<div> 1B </div>
<MyDivider />
<div> 2 </div>
<MyDivider />
{myData.map((row) => (
<div key={row.key}>
<div>{row.A}</div>
<div>{row.B}</div>
<MyDivider />
</div>
))}
// more rows, with single (merged) or dual columns...
</div>
);
Is it possible to do this without dynamically generating the grid css? Namely, defining grid settings for single / dual column lines, and divider lines? Also, due to the map function, under React, my dynamic content ends up wrapped in a div; do I need to break this down in multiple map's so that I don't have this wrapping div?
Thanks!
Edit 10/24/2020:
To clarify things, I don't want to literally display what is in this drawing, this is just a layout, with each '1A', '1B' block corresponding to some data cell, just like in a tabulator.

Answer 1

Assuming that you know if a row is single or dual columns.
You can make a cell span by using grid-column like the sample below
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px; // for demonstration purposes
}
.grid-item {
background-color: lightblue; // for demonstration purposes
}
.grid-item.single {
grid-column: span 2;
}
.grid-separator {
grid-column: span 2;
background-color: lightgreen; // for demonstration purposes
}
<div class="grid">
<div class="grid-item">A1</div>
<div class="grid-item">B1</div>
<div class="grid-separator">Separator</div>
<div class="grid-item single">A2</div>
<div class="grid-separator">Separator</div>
<div class="grid-item">A3</div>
<div class="grid-item">B3</div>
<div class="grid-separator">Separator</div>
<div class="grid-item">A4</div>
<div class="grid-item">B4</div>
<div class="grid-separator">Separator</div>
<div class="grid-item single">A5</div>
</div>
Note that you need to add the single class under some condition

Answer 2

Please show us your css or you can do it like that way...
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.grid div {
text-align: center;
background: #ddd;
margin: 2px;
padding: 10px;
}
.mydevider {
grid-column: 1 / span 2;
}
<div class="grid" >
<div> 1A </div>
<div> 1B </div>
<div class="mydevider">
<div> 1A </div>
</div>
<div> 1B </div>
<div> 1B </div>
<div class="mydevider">
<div> 1A </div>
</div>
<div> 1B </div>
<div> 2 </div>
</div>