Merhaba arkadaşlar bu yazımda sizlere kendinize ait Responsive CSS Grid Layout’unuzu yapmayı göstereceğim.

Öncelikle ihtiyacımız olan şey normalize.css dosyası Normalize CSS’in ne olduğunu ileri ki zamanlarda sizlere anlatacağım. Normalize CSS indirmek buraya tıklayınız.

Normalize CSS’i sisteminize ekledikten sonra kendi oluşturduğunuz bir CSS dosyasını da HTML kodlarınıza ekleyin ve head taglerinizin içine şu kodları eklemeyi unutmayın.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Oluşturacağımız Grid Sistemi HTML Olarak şu şekilde olacaktır.

<div class=”row”>

<div class=”col one”></div>

<div class=”col one”></div>

<div class=”col one”></div>

<div class=”col one”></div>


<div class=”col one”></div>


<div class=”col one”></div>

<div class=”col one”></div>


<div class=”col one”></div>


<div class=”col one”></div>

<div class=”col one”></div>


<div class=”col one”></div>


<div class=”col one”></div>

</div>

Şeklinde olacaktır yani 1 satırda maksimum 12 adet kolon bulunmak zorundadır.

Şimdi yapacağımız Grid Layout’un asıl kısmı olan CSS kısmına başlayalım ve en sonunda belirli hesaplamalar nasıl yapılır ondan bahsedeyim. Sizlere

CSS

*{
box-sizing: border-box;
}

body{
width: 100%;
min-width:320px;
max-width: 1200px;
margin: 0 auto;
}

.row{
padding: 20px;
width: 100%;
min-height: 1px;
float: left;
}

.col{
background: #FF0000;
min-height: 40px;
border-radius: 8px;
margin-left: 2.4%;
margin-right: 2.4%;
display: inline-block;
float: left;
}

.col:first-child{
margin-left: 0px;
}
.col:last-child{
margin-right: 0px;
}

.col.one{width: 3.93%;}
.col.two{width: 12.66%}
.col.three{width: 21.4%;}
.col.four{width: 30.13%}
.col.five{width: 38.867%;}
.col.six{width: 47.6%;}
.col.seven{width: 56.333%;}
.col.eight{width: 65.07%;}
.col.nine{width: 73.8%;}
.col.ten{width: 82.533%;}
.col.eleven{width: 91.27%;}
.col.twelve{width: 100%;}

@media (max-width: 768px){
.col{
width: 100% !important;
margin: 5px 0px 5px 0px;
}
}

Tüm CSS kodlarımız böyleyken teker teker sizlere bu kodları açıklamaya başlayalım.

*{
box-sizing: border-box;
}

*işareti tüm elemanların içindeki işlemlerden etkileneceğini temsil eder.

box-sizing, bir elementin genişliği ve uzunluğunun nasıl hesaplanacağını temsil eder.

box-sizing’i border-box olarak tanımlamak ise elementin genişliği ve uzunluğunun içinde ki içerik, padding ve border değerlerinin de eklenerek hesaplanmasını sağlar.

body{
width: 100%;
min-width:320px;
max-width: 1200px;
margin: 0 auto;
}

body, elementinde yaptığımız bu düzenlemeleri incelersek

Genişliğini %100 yapıyoruz böylece her zaman bulunduğu elementin maksimum genişliğinde olmasını sağlıyoruz.

Body elementinin minimum genişliğini 320px ve maksimum genişliğini ise 1200 px olarak ayarlıyoruz.

margin:0 auto; ise tüm elemanların ortalanmasını sağlıyor.

.row{
padding: 20px;
width: 100%;
min-height: 1px;
float: left;
}

row classına sahip elementlere verdiğimiz özellikleri incelersek

20 px bir padding veriyoruz böylece içerdeki tüm elemanlar yukarıdan, aşağıdan, sağdan ve soldan 20px ötelenmiş oluyor.

Hine genişliğini %100 yapıyoruz böylece içinde bulunduğu alanın genişliği kadar geniş olmasını sağlıyoruz.

Olabileceği minimum yüksekliği 1px veriyoruz ve float: left ile de sola yapıştırılmasını sağlıyoruz.

.col{
background: #FF0000;
min-height: 40px;
border-radius: 8px;
margin-left: 2.4%;
margin-right: 2.4%;
display: inline-block;
float: left;
}

col classına sahip elementlere verdiğimiz özellikleri incelersek,

arka plan rengi sadece doğru çalışıp çalışmadığını anlamak için

minimum uzunluğunu 40px olarak ayarlıyoruz.

border-radius ile köşelerinin kısımlarının dik olarak değil daha eğimli olmasını sağlıyoruz.

margin-left: 2.4% ve margin-right: 2.4% kısmını hesaplamaları anlatırken açıklayacağım.

display: inline-block kodu ise görünümünü inline-block olarak yani bir satır boyunca her elemanın yan yana olmasını amaçlıyor.

float: left ise hine sola doğru yatırılmasını sağlıyor.

.col:first-child{
margin-left: 0px;
}
.col:last-child{
margin-right: 0px;
}

Bu kodlar row’un içindeki col classına sahip ilk elemanın margin-left’ini 0px ve son elemanın margin-right özelliğini 0px e eşitliyor böylece en baştaki ve en sondaki elemanlar direkt olarak içinde bulundukları elemanın en köşelerinde olmuş oluyorlar.

Şimdi asıl karmaşık olan kısma geliyoruz önce kodları daha sonra ise hesaplamanın nasıl yapıldığını anlatacağım.

.col.one{width: 3.93%;}
.col.two{width: 12.66%}
.col.three{width: 21.4%;}
.col.four{width: 30.13%}
.col.five{width: 38.867%;}
.col.six{width: 47.6%;}
.col.seven{width: 56.333%;}
.col.eight{width: 65.07%;}
.col.nine{width: 73.8%;}
.col.ten{width: 82.533%;}
.col.eleven{width: 91.27%;}
.col.twelve{width: 100%;}

Bu kısım aslında en karmaşık olan kısım önce bir fotoğraf ile nasıl bir görüntümüz olduğunu göstereyim

İlk başta verdiğim HTML kodların dan bu tasarım ortaya çıkacaktır. Siyah olarak çizdiğim çizgiler ise her bir margin-left ve margin-right değerleridir. Hatırlıyorsanız bunlara %2.4 değerlerini vermiştik. Şimdi çizdiğim her çizgi için 2.4 olarak kabul edip toplarsam 52.8 değerini ve toplam sonucu 100’den çıkartırsam. 47.2 gibi bir değer çıkar bunu da 12’ye bölersek 3.93 değeri çıkar.

Şimdi burada yaptığımız şey şu tüm satırın genişliği %100 ve biz %100’den tüm margin-left ve margin-right değerlerini çıkartırsak aslında bu 12 siyah karenin kapladığı genişliği % değerini bulmuş oluyoruz daha sonra elde ettiğimiz değeri toplam kare miktarına bölersek tek 1 karenin kapladığı genişliği % olarak bulmuş oluyoruz. Yani eğer margin-left ve margin-right değerleri %2.4 den farklı olsaydı yukarı da yazmış olduğum tüm kodlar daha farklı olacaktı.

Şimdi son kısım olan bunları responsive hale getirme kısmına gelelim burada devreye @media kodları giriyor.

@media (max-width: 768px){
.col{
width: 100% !important;
margin: 5px 0px 5px 0px;
}
}

Burada yaptığımız işlem aslında basit kullandığımız cihaz da genişliğimiz 768px ve altındaysa col classına sahip elementlere şu işlemi uyguluyor.

genişliklerini alabilecekleri maksimum genişliğe eşitliyoruz yani artık yan yana değil de alt alta olmaya başlıyorlar daha sonra margin-top: 5px margin-right:0px margin-bottom: 5px ve margin-left: 0px’miş gibi gözükmesini istedik. Yukarıda verdiğim HTML kodu örneği yukarıda bahsettiğim şartlar sağlandığında

şeklinde gözükecektir. Yani her element sanki col twelve gibi davranmaya başlayacaktır.

Bu yazımda kendimize özel Responsive CSS Grid Layout’u oluşturmuş olduk. Bu konuda ki bazı hesaplamaların nasıl hesaplandığından bahsettik ve bu sistemin nasıl responsive hale getirebileceğimizden bahsettik.

Bu yazımı beğendiyseniz ve CSS hakkında yazmış olduğum diğer yazıları merak ediyorsanız buraya tıklayabilirsiniz.