如何在CSS网格布局中排成第n行？

Question

我正在尝试使用CSS网格布局来做类似的事情：

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

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

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

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

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

然后我尝试在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;
}

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

我有一个JSFiddle外观，这显示了我的问题，即行没有分开。https://jsfiddle.net/loonitun/gbd45zty/1/

我对CSS网格还不够好，但是我已经阅读了一些文章，并且了解到我的问题可能与分配的网格区域有关，但是当我删除分配的区域时，它只会合并所有行和列变成一个正方形，所以我有点迷茫，无法获得理想的效果。

Answer 1

CSS-Grid并不是真正应该替代[是实际`表格的东西。

但是，您的问题是，您定义的网格区域仅覆盖一行，因此彼此重叠。

我建议您删除这些，然后按如下所示采用grid-auto-flow:column。

.Employee-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: column;
}

.EmployeeTop {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-column: 1 / -1;
}

.Employee-container * {
  border: 1px solid grey;
}

.EmployeeCostumerName {
  grid-column: 1;
}

.EmployeeCostumerNumber {
  grid-column: 2;
}

.EmployeeOrderId {
  grid-column: 3;
}

.EmployeeOrderName {
  grid-column: 4;
}

.EmployeeDateStart {
  grid-column: 5;
}

.EmployeeDateEnd {
  grid-column: 6;
  ;
}

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


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

Answer 2

这里是代码。希望对您有帮助。如果有任何更改，请通知我。我删除了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{ 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>