How do you change the elements on the desctop?

[fbio]

1 yth on the left

2 by centre

3 and 4 mortgages

---

Right now.

1 etham and 2 yth on the left

3 centre

4 right

.wrap {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
}
.first {

grid-column: 1/-1;

}
.second {}
.third {

grid-column: span 2;

}
.fourth {

grid-column: 1/-1;

}
@media (min-width: 500px) {

.wrap {

grid-template-columns: min-content min-content 1fr min-content;

}
.item {

grid-column: span 1;

}
.third {

justify-self: center;

}
}
.wrap div {

outline: 1px solid red;

}

{

box-sizing: border-box;

}

<div class="wrap">

<div class="item first">1</div>

<div class="item second">2</div>

<div class="item third">3</div>

<div class="item fourth">4</div>

</div>

[Amritpal]

In the attached code, you create three columns and place four elements there. If you want four elements to be in four different columns, you need to create four columns instead of three, and to control their width, you need to pick up the parameters you need.

Example: grid-template-columns: 1fr 1fr 1fr 1fr To create four identical columns.

P.S. - How to correctly manage the content position in the table https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout article.