CSS Grid: Empty Header Columns

Issue

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.

Solution

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>

Answered By - Damian