Witam,
Potrzebuję pomocy, ponieważ grid nie działa u mnie tak jak powinien,
Gdy dodaje 3 <.div> "card-container-2" który zawiera jakąś treść od razu wpycha się na 2 wiersz, nie jest na pozycji w której ja chcę żeby był np. w wierszu 4 a nie w 2, ostatni <.div> "card-container-3" dokleja się do poprzednika i też nie reaguje.
Wszystko działa jak należy gdy usunę "card-container-2 i 3", wtedy mogę ustawiać elementy w grid według uznania.
Na pewno ktoś jest wstanie mi pomóc 
Poniżej wklejam wycinek kodu HTML i CSS:
<html>
<div class="effective-container">
<div class="effective-border">
<p class="effective-main-text"><b>forum lorum</p>
<p class="effective-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div class="bubbly-btn-left">
<a href="index.html"><button href="#" class="bubbly-button bubbly-btn">Rejestracja</button></a>
</div>
</div>
<div class="cpi-img">
<img src="./images/img.png" alt="o nas" />
</div>
<div class="card-container-1">
<p class="container-text">Lorem ipsum dolor<b></p>
<img alt="#" src="./images/img1.png" />
<p class="container-sm-text" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="card-container-2">
<p class="container-text">Lorem ipsum dolor</p>
<img alt="#" src="./images/img2.png" />
<p class="container-sm-text" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="card-container-3">
<p class="block-text">Lorem ipsum dolor</p>
<img alt="#" src="./images/img3.png" />
<p class="block-sm-text" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<css>
.effective-container {
display: grid;
grid-template: 22rem 35rem 35rem / repeat(2, 35rem);
justify-content: center;
align-content: center;
margin-top: 5rem;
margin-bottom: 5rem;
gap: 1.5rem;
padding: 1rem;
}
.effective-border {
grid-column: 1 / 3;
grid-row: 1 / 2;
border: 1px solid var(--purple);
border-radius: 1rem;
}
.effective-main-text {
padding: 2rem;
font-family: "Baskervville SC", serif;
font-weight: 500;
font-style: normal;
font-size: 2.8rem;
color: var(--blackg);
}
.effective-text {
font-family: "Roboto", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1rem;
opacity: 0.5;
padding: 0 0 2rem 4rem;
width: 40rem;
color: var(--blackg);
}
.bubbly-btn {
width: 16rem;
height: 3rem;
font-weight: 500;
}
.bubbly-btn-left {
padding: 0 0 2rem 4rem;
}
.cpi-img {
grid-column: 2 / 3;
grid-row: 1 / 2;
display: flex;
justify-content: center;
align-items: center;
margin-left: 8rem;
}
.cpi-img img {
width: 25rem;
height: 17rem;
padding: 1rem;
}
.card-container-1 {
grid-column: 1 / 2;
grid-row: 2 / 3;
display: flex;
border: 1px solid var(--blue);
border-radius: 1rem;
flex-direction: column;
height: 35rem;
max-width: 35rem;
}
.card-container-1 img {
display: flex;
height: 13rem;
width: 18rem;
margin: 0 auto;
padding: 1rem;
}
.card-container-2 {
grid-column: 2 / 3;
grid-row: 2 / 3;
display: flex;
flex-direction: column;
border: 1px solid var(--blue);
border-radius: 1rem;
height: 35rem;
max-width: 35rem;
}
.card-container-2 img {
display: flex;
height: 10rem;
width: 18rem;
margin: 0 auto;
}
.card-container-3 {
grid-column: 1 / 3;
grid-row: 3 / 4;
background-color: var(--purple);
border-radius: 1rem;
}
.card-container-3 img {
display: flex;
height: 10rem;
width: 18rem;
align-self: flex-end;
}
.container-text {
font-family: "Baskervville SC", serif;
font-weight: 500;
font-style: normal;
font-size: 2rem;
text-align: left;
padding: 3rem 3rem 0 3rem;
line-height: 3rem;
color: var(--blackg);
}
.container-sm-text {
font-family: "Roboto", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1.2rem;
color: var(--blackg);
text-align: left;
padding: 1rem 1.5rem 1rem 1.5rem;
opacity: 0.5;
}
CSS 
HTML 
, teraz działa :)