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