CSS Grid: Complex nested grid with dynamic rows

Question

I'm trying to achieve a layout like this using CSS Grid:

Headers and Sub 1, Sub 2, etc. are fixed, so the only growing part are the dynamic rows, a new row is added whenever the user clicks "Add item". All needs to be correctly aligned. I am trying to achieve this using CSS Grid, more or less with the following markup:

<div class="containter">
  <div class="header"></div>
  <div class="subheaders"></div>
  <div class="rows">
    <div class="row">
      <div class="column"></div>
      <div class="column"></div>
      <div class="column multicolumn">
        <input />
        <input />
        <input />
      </div>
      <div class="column multicolumn">
        <input />
        <input />
        <input />
      </div>
      <div class="column multicolumn">
        <input />
        <input />
        <input />
      </div>
      <div class="column"></div>
      <div class="column"></div>
    </div>    
  </div>
</div>

Is this even possible using the CSS grid? I am aware that this could maybe be achieved using a table, but since it's not exactly tabular data, we are trying to use the grid.

EDIT: Added more info to the screenshot

Answer 1

I rebuild your layout using a 12 column responsive grid system combined with flex properties.

For supporting responsive layouts you can simply add media querys for the col elements, e.g. col-4-xl, col-6-xl, so that it works similar the grid system of Bootstrap or Materialize.

Also you can add a parent element for the row class, that contains some padding to recreate the grid-gap property in y direction, e.g.

.row__parent{
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
}

But this detailed changes depend on your demands.

Codepen: https://codepen.io/michaelkonstreu/pen/KKzxmyL