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

yone1108 · 17 Mart 2023

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ü?

nyksgod · 17 Mart 2023

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.

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

Ayrıntılı düzenleme

yone1108

Decapat

Dosya Ekleri

nyksgod

Femtopat

Benzer konular

Bu konuyu görüntüleyen kullanıcılar