CSS Grid: Empty Header Columns [closed] - css

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 months ago.
Improve this question
This table layout using CSS GridI am new to CSS Grid and would like to know if the following can be achieved using grid layout.

Answer 1

Yes, you can do it.
You can generate CSS Grid layouts here
I have also generated one for you which would represent current situation.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas: "empty1 empty1 header1 header2 header3 empty2 empty2" "text1 text2 text3 text4 text5 text6 text7" "text8 text9 text10 text11 text12 text13 text14";
}
.text1 {
grid-area: text1;
}
.text2 {
grid-area: text2;
}
.text3 {
grid-area: text3;
}
.text4 {
grid-area: text4;
}
.text5 {
grid-area: text5;
}
.text6 {
grid-area: text6;
}
.text7 {
grid-area: text7;
}
.text14 {
grid-area: text14;
}
.text13 {
grid-area: text13;
}
.text12 {
grid-area: text12;
}
.text11 {
grid-area: text11;
}
.text10 {
grid-area: text10;
}
.text9 {
grid-area: text9;
}
.text8 {
grid-area: text8;
}
.empty1 {
grid-area: empty1;
}
.empty2 {
grid-area: empty2;
}
.header1 {
grid-area: header1;
}
.header2 {
grid-area: header2;
}
.header3 {
grid-area: header3;
}
<div class="container">
<div class="text1">text1</div>
<div class="text2">text2</div>
<div class="text3">text3</div>
<div class="text4">text4</div>
<div class="text5">text5</div>
<div class="text6">text6</div>
<div class="text7">text7</div>
<div class="text14">text14</div>
<div class="text13">text13</div>
<div class="text12">text12</div>
<div class="text11">text11</div>
<div class="text10">text10</div>
<div class="text9">text9</div>
<div class="text8">text8</div>
<div class="empty1"></div>
<div class="empty2"></div>
<div class="header1">HDR Item1</div>
<div class="header2">HDR Item2</div>
<div class="header3">HDR Item3</div>
</div>