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

Issue

    .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 :

Solution

CSS:

.item{
    border: 1px solid red;
    text-align: center;
    padding: 10px;
}
.main-dev {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 200px;
}
.item3{
    grid-column: 1 / 3; /* or grid-column: 1 / span 2 */
}

HTML:

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

Answered By - Arman Ebrahimi