How to do third column in the center in css grid?

Question

I have three divs. how to do two div as columns but the thrid need to be center and one column without grid-area?

Like in the picture.

I have try:

 display:grid;
 grid-template-columns:1fr 1fr;
 grid-template-row:1fr 1fr;

But its create four columns.. and not what I need..

Well, I prefer css grid, In flex I don't want to use width:50%.. — Jon Sud, Jan 18 '20 at 13:57

score 2 · Accepted Answer · answered Jan 18 '20 at 14:02

Create a grid with 4 columns, each div should span 2 columns, and the last child should start at the 2nd column.

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 1fr;
  grid-gap: 2px;
}

.grid > div {
  height: 20vmin;
  width: 20vmin: 20vmin;
  grid-column-end: span 2;
  background: red;
}

.grid > div:last-child {
  grid-column-start: 2;
}

<div class="grid">
  <div></div>
  <div></div>
  <div></div>
</div>

How to do third column in the center in css grid?

1 Answers1