how to divide css grid like first column 50%, second column 50% and third column 100%?

Question

    .main-dev {
        display: grid;
        grid-template-columns: 50% 50%;
    }

I want to arrange my grid into 50% 50% and 100% structures. I have attached the required output image.

Current output :

Expected Output :

Answer 1

.item {
  border: 1px solid red;
  text-align: center;
  padding: 10px;
}

.main-dev {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 200px;
  border: solid red 1px;
}

.item3 {
  grid-column: 1 / 3;
  /* or grid-column: 1 / span 2 */
}

<div class="main-dev">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item item3">3</div>