Grid sisteminde content alanı sidebar gizlendiğinde nasıl 100% genişlik olur?

yone1108

Decapat
Katılım
21 Nisan 2021
Mesajlar
709
Makaleler
1
Çözümler
2
CSS:
.grid-container {
    display: grid;
    grid-template-areas:
    "navbar   header header header header"
    "navbar   content content content content";
    grid-template-rows: 80px auto;
    height: 100%;
   
}

header {
    background-color: yellow;
    grid-area: header;
}

aside {
    grid-area: navbar;
    background-color: tomato;

    overflow: auto;
}

article {
    grid-area: content;
    background-color: aqua;
    overflow: auto;
}

HTML:
<div class="grid-container">
        <header class="header">header</header>
        <aside class="sidebar">aside</aside>
        <article class="content">content</article>
</div>

Sidebar display: none; yaptığım zaman header ve article sayfanın tamamını kaplasın istiyorum bunu yapmak mümkün mü?
 

Dosya Ekleri

  • Screenshot_1.png
    Screenshot_1.png
    13,4 KB · Görüntüleme: 14
Son düzenleyen: Moderatör:
Sanırım belli bir genişlikte sidebar'ı kaldırmak istiyorsunuz.
@media kullanarak yapabilirsiniz. örnek veriyorum;

CSS:
@media (max-width:768px){
    .grid-container{
        grid-template-areas:
            "header"
            "main";
    }
    .sidebar{
    diplay:none;
    }
}

grid-arealar zaten tanımlanmış, @media içindeki grid-arealar'a sidebar yazmadığımız için de 100% genişlik elde ettik.
 

Geri
Yukarı