CSS Grid Nasıl Kullanılır?

Bootstrap kütüphanesindeki grid kullanımını bilenleriniz vardır. Örneğin sitenin header kısmı 12 kolon genişliğinde iken içerik kısmı 9 kolon, sidebar ise 3 kolondur. Her satırdaki kolon sayısının sınırı ise 12'dir. Buna benzer bir sistemi CSS'in Grid özelliğini kullanarak gerçekleştirebiliyoruz. İlk olarak aşağıdaki gibi body etiketleri arasına HTML kodu yazdım:
<body>
    <div class="layout">
        <div class="header section">Header</div>
        <div class="content section">Content</div>
        <div class="sidebar section">Sidebar</div>
        <div class="footer section">Footer</div>
    </div>
</body>
Sonrasında bu class parametrelerine göre aşağıdaki CSS kodu yazıldı:
body{
    background:#444444;
}

.section{
    background:#999;
    font-size: 25px;
    text-align:center;
    line-height: 100px;
}

.layout{
    width:1000px;
}
Grid kullanmadan önceki görüntü resimde olduğu gibidir:
Grid Kullanılmadan Önce
İlk önce bölgelerin kendine ait sınıflarını grid-area ile isimlendiriyorum:
.header{grid-area: header;}
.content{grid-area: content;}
.sidebar{grid-area: sidebar;}
.footer{grid-area: footer;}
İsimlendirmeyi yaptıktan sonra bu sınıfların tümünü kapsayan layout sınıfına aşağıdaki CSS kodları eklenir:
.layout{
    display: grid;
    grid-template-areas:
        'header header header header'
        'content content content sidebar'
        'footer footer footer footer';
    grid-gap: 5px; 
    width:1000px;
}
Bu kodda ne yaptığımızı inceleyelim. display: grid; ile grid kullanımını aktifleştirdik. Sonrasında grid-template-areas özelliği ile öncesinde adlandırdığımız grid-area isimlerini kullanarak bölge paylaşımının nasıl olacağını belirledik. grid-gap ile bölgeler arası boşluğu 5px şeklinde belirledik. Yazdıklarımız sonucunda tekrar index.html dosyasına baktığımızda aşağıdaki değişim görülmüş olacaktır:
Grid Kullanıldıktan Sonra
Izgara (grid) düzeni başarılı bir şekilde uyarlamış olduk.

Hiç yorum yok:

Yorum Gönderme