如何在Css网格中创建第n个行数

Question

我正在尝试学习Css Grid以及如何使用它构建一些表。

我正在尝试做这样的事情。

|姓名|首字母缩写|功能

|店铺| ID |订单号|订单开始|日期结束日期|

|店铺| ID |订单号|订单开始|日期结束日期|

|店铺| ID |订单号|订单开始|日期结束日期|

那将是一个小组，其中不知道行，因为每个商店下都有许多商店。

然后我尝试在Css网格中构建代码，这是我的代码。

    <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 -->

我的CSS代码是

   .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; }

我对它的外观有所怀疑，这表明我的问题是行没有分开。https://jsfiddle.net/loonitun/gbd45zty/1/

我对Css网格还不够好，但是我已经阅读了一些文章，并了解到我的问题可能与受让人的Grid区域有关，但是当我删除所受的区域时，它只是将所有行和列合并在一起变成一个正方形，所以我有点不知所措，无法获得想要的效果。

任何帮助或指向好的指南的指针，将不胜感激。

Answer 1

这里是代码。我使用了flex概念。如今，flex概念对于每个人来说都很容易。希望对您有帮助。如果有任何更改，请通知我。

.EmployeeTop {
  display: flex;
  margin-bottom: 20px;
}

.emp_wrap {
  margin-right: 20px;
}

.inner-emp {
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
  margin-bottom:10px;
}

<div class="Employee-container">

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

  <div class="inner-emp">
    <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>
  </div>
  <!-- this part is the repeating part from database -->
  <div class="inner-emp">
    <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>

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