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:
İ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:
Izgara (grid) düzeni başarılı bir şekilde uyarlamış olduk.
Hiç yorum yok:
Yorum Gönderme