display: grid; İle Şu Yapıyı Nasıl Oluşturabilirim.

İlk defa display: grid; kullanarak bir alan oluşturuyorum, responsive'de bu 5 alanı üstte 1 altta 2+2 şeklinde göstermek istiyorum. Bunun için grid-template-areas kullanımı nasıl olmalı? Doğru yapıyı oluşturan kodu yazamadım.

Sorunun olduğu alan imzadaki sitede anlık olarak yayında, düzeltemedim.

Åžu an ki hali:



Düzenlemek istediğim alan şöyle görünmeli:

İlk yazıdan sonra (mobilde) <div style="clear:both"></div> kullanmayı denediniz mi?

.grid {
    display: grid;
    grid-template-areas:
        "entry1 entry1"
        "entry1 entry1"
        "entry2 entry3"
        "entry4 entry5";
    grid-template-columns: 1fr 1fr;
    grid-gap: 6px;
}

Şeklinde düzenlerseniz istediğiniz gibi olur.

clear:both nasıl kullanılıyor bilmiyorum, işe yarar mı ondanda emin değilim ama aradığım çözümü @ErenDemir; sağolsun yazmış.

Aynen, böyle yapabiliyormuşuz demek ki. Şimdi daha iyi anladım mantığı, çok teşekkürler.

@media screen and (max-width: 767px)
.fc-style-2 {
display: grid;
gap: 10px;
}


.fc-style-2 a ek olarak bunları eklersen tam olarak gosterdiğin resimdeki gibi görüntü olur