I couldn't split a particular row into 3 equal parts in Grid template area in CSS-CodePudding

I am trying to render a web page design using html and css. Everywhere except the 4th row is as I want, but in the 4th row, I want to divide the 3 divs into 3 equal parts and cover the entire width. Any ideas on how I can achieve this?

Here is my code

     <div className="container">
                <div className="box box1">Grid Item 1</div>
                <div className="box box2">Grid Item 2</div>
                <div className="box box3">Grid Item 3</div>
                <div className="box box4">Grid Item 4</div>
                <div className="box box5">Grid Item 5</div>
                <div className="box box6">Grid Item 6</div>
                <div className="box box7">Grid Item 7</div>
                <div className="box box8">Grid Item 8</div>
                <div className="box box9">Grid Item 9</div>
            </div>
.box {
  text-align: center;
  padding: 20px;
  border: 1px solid #000;
}
.box1 {
  background-color: #2ecc71;
}
.box2 {
  background-color: #3298db;
}
.box3 {
  background-color: #9b59b6;
}
.box4 {
  background-color: #e67e22;
}
.box5 {
  background-color: #e74c3c;
}
.box6 {
  background-color: #16a085;
}
.box7 {
  background-color: #2ecc71;
}
.box8 {
  background-color: #3298db;
}
.box9 {
  background-color: #9b59b6;
}

.container {
  padding: 10px;
  display: grid;
  grid-template: 250px 250px 1fr 1fr 250px/ 1fr 1fr 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-areas: 
  "A A B C"
  "D D D C"
  "E E E E"
  "F G H ."
  "I I I I";
}
.box1{
  grid-area: A;
}
.box2{
  grid-area: B;
}
.box3{
  grid-area: C;
}
.box4{
  grid-area: D;
}
.box5{
  grid-area: E;
}
.box6{
  grid-area: F;
}
.box7{
  grid-area: G;
}
.box8{
  grid-area: H;
}
.box9{
  grid-area: I;
}

Here I am sharing the screenshot that I am trying to create and having the problem.

CodePudding user response：

This is why e.g. Bootstrap has 12 columns - in your case you want to align things sometimes when there are factors of 2, 3, 4.

If you want to keep using grid-template areas you need to line things up like this:

  "A A A A A A B B B C C C"
  "D D D D D D D D D C C C"
  "E E E E E E E E E E E E"
  "F F F F G G G G H H H H"
  "I I I I I I I I I I I I"

and change to have 12 columns:

.box {
  text-align: center;
  padding: 20px;
  border: 1px solid #000;
}

.box1 {
  background-color: #2ecc71;
}

.box2 {
  background-color: #3298db;
}

.box3 {
  background-color: #9b59b6;
}

.box4 {
  background-color: #e67e22;
}

.box5 {
  background-color: #e74c3c;
}

.box6 {
  background-color: #16a085;
}

.box7 {
  background-color: #2ecc71;
}

.box8 {
  background-color: #3298db;
}

.box9 {
  background-color: #9b59b6;
}

.container {
  padding: 10px;
  display: grid;
  grid-template: 250px 250px 1fr 1fr 250px/ repeat(12, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-areas: "A A A A A A B B B C C C" "D D D D D D D D D C C C" "E E E E E E E E E E E E" "F F F F G G G G H H H H" "I I I I I I I I I I I I";
}

.box1 {
  grid-area: A;
}

.box2 {
  grid-area: B;
}

.box3 {
  grid-area: C;
}

.box4 {
  grid-area: D;
}

.box5 {
  grid-area: E;
}

.box6 {
  grid-area: F;
}

.box7 {
  grid-area: G;
}

.box8 {
  grid-area: H;
}

.box9 {
  grid-area: I;
}

<div >
  <div >Grid Item 1</div>
  <div >Grid Item 2</div>
  <div >Grid Item 3</div>
  <div >Grid Item 4</div>
  <div >Grid Item 5</div>
  <div >Grid Item 6</div>
  <div >Grid Item 7</div>
  <div >Grid Item 8</div>
  <div >Grid Item 9</div>
</div>