I'm having some trouble with creating a table using the grid function in CSS. Specifically, I am stuck on how to add dynamic categories at the top without hardcoding styles for each category count.
I have tried using the grid-column-start property to start the categories on column 2 and span 2 columns, but it's not working as expected.
Does anyone have any suggestions on how to solve this issue? Thank you.
.wrapper {
display: grid;
grid-template-columns: repeat(5, 100px);
}
.box {
background-color: #444;
color: #fff;
outline: 2px solid #000;
padding: 5px;
}
.category {
grid-row: 1;
grid-column-start: 2 / span 2;
}
.header {
grid-row: 2;
}
/*hacks to manually place grid boxes*/
.category1 {
grid-row: 1;
grid-column: 2 / span 2;
}
.category2 {
grid-row: 1;
grid-column: 4 / span 2;
}
.row1 {
grid-row: 3;
}
.row2 {
grid-row: 4;
}What I want:
<p>
<div class="wrapper">
<div class="box category1">Category</div>
<div class="box category2">Category</div>
<div class="box header">#</div>
<div class="box header">header1a</div>
<div class="box header">header1b</div>
<div class="box header">header2a</div>
<div class="box header">header2b</div>
<div class="box data row1">1</div>
<div class="box data row1">data1a</div>
<div class="box data row1">data1b</div>
<div class="box data row1">data2a</div>
<div class="box data row1">data2b</div>
</div>
</p>
<p></p>
What I have:
<p>
<div class="wrapper">
<div class="box category">Category</div>
<div class="box category">Category</div>
<div class="box header">#</div>
<div class="box header">header1a</div>
<div class="box header">header1b</div>
<div class="box header">header2a</div>
<div class="box header">header2b</div>
<div class="box data">1</div>
<div class="box data">data1a</div>
<div class="box data">data1b</div>
<div class="box data">data2a</div>
<div class="box data">data2b</div>
</div>
</p>