CSS Grid: Empty Header Columns

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>