html 如何在CSS网格布局中创建第n个行数？

bmvo0sr5 于 2023-02-10 发布在其他

关注(0)|答案(2)|浏览(125)

.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网格还不是很好，但我读过一些文章，了解到我的问题可能与分配的网格区域有关，但当我删除分配的区域时，它只是将所有的行和列合并到一个正方形中，所以我有点不知道该怎么做才能得到理想的效果。

Html

来源：https://stackoverflow.com/questions/59320519/how-to-make-nth-numbers-of-rows-in-css-grid-layout

2条答案

按热度按时间

7lrncoxx1#

这是代码。希望对你有帮助。如果有任何变化，请让我知道。我删除了一些类的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>

赞(0）回复(0）举报 2023-02-10

bmp9r5qi2#

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>

赞(0）回复(0）举报 2023-02-10

我来回答

html 如何在CSS网格布局中创建第n个行数？

2条答案

相关问题

热门标签

最新问答