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.

You may only set the grid-template-columns rule. Rows Will follow. You can also use display:table/table-row and table-cell. — G-Cyrillus
– G-Cyrillus, Commented Dec 13, 2019 at 11:08
i have updated your code in css. Please check and let me know. — Revti Shah
– Revti Shah, Commented Dec 13, 2019 at 12:49

Jacques · Accepted Answer · 2023-02-07 10:00:41Z

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>

Okay, i see what i have done wrong ( misunderstood how the area assignements worked ) Thank you for the code snippets, was more clear when i could compare the two.

Paulie_D · Accepted Answer · 2019-12-13 12:28:33Z

CSS-Grid is not really an appropriate substitute for something that should semantically be an actual `table.

However, your issue is that the grid areas you have defined only cover a single row and so layer over one another.

I would suggest that you remove these and then adopt grid-auto-flow:column as follows.

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

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related