How to make nth numbers of rows in CSS Grid layout?

Question

I am trying to make something like this with CSS grid layout:

| Name | Initials | Function

| Shop | ID | OrderNumber | order Start | date end date |

| Shop | ID | OrderNumber | order Start | date end date |

| Shop | ID | OrderNumber | order Start | date end date |

That would be one group, where the rows are unknown as many shops can be under each name.

I then tried to build that in CSS grid; here is my code for it:

.Employee-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "EmployeeTop EmployeeTop EmployeeTop EmployeeTop EmployeeTop EmployeeTop" "EmployeeCostumerName EmployeeCostumerNumber EmployeeOrderId EmployeeOrderName 
 EmployeeDateStart EmployeeDateEnd";

}

.EmployeeTop {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "EmployeeTopName EmployeeTopInitinal EmployeeTopFunction";
  grid-area: EmployeeTop;
}

.EmployeeTopName {
  grid-area: EmployeeTopName;
}

.EmployeeTopInitinal {
  grid-area: EmployeeTopInitinal;
}

.EmployeeTopFunction {
  grid-area: EmployeeTopFunction;
}

.EmployeeCostumerName {
  grid-area: EmployeeCostumerName;
}

.EmployeeCostumerNumber {
  grid-area: EmployeeCostumerNumber;
}

.EmployeeOrderId {
  grid-area: EmployeeOrderId;
}

.EmployeeOrderName {
  grid-area: EmployeeOrderName;
}

.EmployeeDateStart {
  grid-area: EmployeeDateStart;
}

.EmployeeDateEnd {
  grid-area: EmployeeDateEnd;
}

<div class="Employee-container">

  <div class="EmployeeTop">
    <div class="EmployeeTopName">Hans Hansen</div>
    <div class="EmployeeTopInitinal">HH</div>
    <div class="EmployeeTopFunction">Montør</div>
  </div>
  <!-- end of EmployeeTop -->

  <div class="EmployeeCostumerName">Shop name 1</div>
  <div class="EmployeeCostumerNumber">5000</div>
  <div class="EmployeeOrderId">10</div>
  <div class="EmployeeOrderName">Hallway</div>
  <div class="EmployeeDateStart">01-06-2020</div>
  <div class="EmployeeDateEnd">20-08-2020</div>

  <!-- this part is the repeating part from database -->

  <div class="EmployeeCostumerName">Shop name 2</div>
  <div class="EmployeeCostumerNumber">6000</div>
  <div class="EmployeeOrderId">20</div>
  <div class="EmployeeOrderName">Stairs</div>
  <div class="EmployeeDateStart">02-05-2020</div>
  <div class="EmployeeDateEnd">05-05-2020</div>

</div>
<!-- End of Employee-Container -->

I have a JSFiddle of how it looks, and that shows my issues with the rows not separating. https://jsfiddle.net/loonitun/gbd45zty/1/

I am not that good with CSS grid yet, but I have read some articles and understood that my issues perhaps has something to do with the grid area that is assigned, but when I remove the assigned areas it just combines all rows and columns into one square, so I am a bit lost as what to do to get the desired effect.

Answer 1

Here is the code. Hope it will help you. If any changes, please let me know. I removed some class in CSS. Please note.

.Employee-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "EmployeeTop EmployeeTop EmployeeTop EmployeeTop EmployeeTop EmployeeTop" "EmployeeCostumerName EmployeeCostumerNumber EmployeeOrderId EmployeeOrderName EmployeeDateStart EmployeeDateEnd";
}

.EmployeeTop {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "EmployeeTopName EmployeeTopInitinal EmployeeTopFunction";
  grid-area: EmployeeTop;
}

.EmployeeTopName { grid-area: EmployeeTopName;}

.EmployeeTopInitinal { grid-area: EmployeeTopInitinal; }

.EmployeeTopFunction { grid-area: EmployeeTopFunction; }

.EmployeeCostumerName{ padding-left: 15px;}

<div class="Employee-container">
  
 
  <div class="EmployeeTop">
    <div class="EmployeeTopName">Hans Hansen</div>
    <div class="EmployeeTopInitinal">HH</div>
    <div class="EmployeeTopFunction">Montør</div>
  </div>
  
  
  <div class="EmployeeCostumerName">Shop name 1</div>
  <div class="EmployeeCostumerNumber">5000</div>
  <div class="EmployeeOrderId">10</div>
  <div class="EmployeeOrderName">Hallway</div>
  <div class="EmployeeDateStart">01-06-2020</div>
  <div class="EmployeeDateEnd">20-08-2020</div>
  
  <!-- this part is the repeating part from database -->
  
   
  <div class="EmployeeCostumerName">Shop name 2</div>
  <div class="EmployeeCostumerNumber">6000</div>
  <div class="EmployeeOrderId">20</div>
  <div class="EmployeeOrderName">Stairs</div>
  <div class="EmployeeDateStart">02-05-2020</div>
  <div class="EmployeeDateEnd">05-05-2020</div>
  
   
</div>