html - 如何在 CSS Grid 布局中制作第 n 行？

Question

我正在尝试用 CSS 网格布局做这样的事情：

| 姓名 | 缩写 | 功能

| 店铺 | 身份证 | 订单号 | 订购开始 | 日期结束日期 |

| 店铺 | 身份证 | 订单号 | 订购开始 | 日期结束日期 |

| 店铺 | 身份证 | 订单号 | 订购开始 | 日期结束日期 |

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

然后我尝试在 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 网格还不是很好，但是我已经阅读了一些文章并了解到我的问题可能与分配的网格区域有关，但是当我删除分配的区域时，它只是将所有行和列合并为一个广场，所以我有点迷失了如何获得预期的效果。

标签： htmlcsscss-grid

Answer 1

这是代码。希望它会帮助你。如果有任何更改，请告诉我。我在 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>