How can I center last grid item but maintain the width?-CodePudding

I have 4 grid items, I want to center the last item in the second row but maintain its current width:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
.item4 {
    grid-column: 2/span 3;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>  
  <div >4</div>
</div>

I have tried:

.item4 {
    grid-column: 2;
}

However, this leaves me with the item4 reduced to the same width as the other items whereas I want it to be bigger ( current width when spaned to 3rd column)

Not sure if there is a way to occupy half of the first column and half of the 3rd column in the second row.

Any help is appreciated

CodePudding user response：

I may not be able to give a clear answer to the solution you are looking for, but the solution below may be the answer to your problem. It can be a solution to make the column line width with Grid-column and give it a certain width.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
.item4 {
    grid-column: 1/-1;
    width: 500px;
    margin: auto;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>  
  <div >4</div>
</div>