I am trying to learn Css Grid and how to build some tables with it .
I am trying to make something like this.
| 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 Fiddle of how it looks, and that shows my issues with the rows not seperating . 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 assignet , but when i remove the assigned areas it just combine all rows and colums into one square, so i am a bit lost as what to do, to get the desiered effect.
Anyhelp or pointers to good guides would be appreciated.