Responsive Web Tasarım Grid Sistemi

CSS Izgara Düzeni, web için iki boyutlu bir düzen sistemidir. İçeriği satır ve sütunlara yerleştirmenize izin verir ve karmaşık düzenleri basitleştiren birçok özelliği vardır. Bu makale size sayfa düzeni ile başlamak için bilmeniz gereken her şeyi öğretecektir.

Grid Layout Nedir?

Bir çerçeve, öğeleri gösterilecek şekilde düzenleyebileceğimiz bir ızgara oluşturan yatay ve dikey çizgiler kümesidir. Web sitemize daha fazla tutarlılık sağlayarak, sayfadan sayfaya geçerken, öğelerin boyut olarak değişmediği tasarımlar oluşturmamıza yardımcı oluyorlar. Bir ızgara, genellikle satırlardan (sütun veya çizgiler) oluşur. Her satır veya sütun arasındaki boşluk genellikle bir oluk olarak adlandırılır.

Birçok web sayfası bir ızgara görüntüsüne dayanmaktadır; Bu sistem sayfanın sütunlara ayrıldığı anlamına gelir.

css grid

Web sayfalarını tasarlarken ızgara görünümü kullanmak çok faydalıdır. Sayfadaki öğeleri yerleştirmeyi kolaylaştırır.

css grid

Duyarlı ızgara görünümünde genellikle toplam genişliği 100% olan ve 12 sütun ayrılmış grid sistemi kullanılır.

Responsive grid sistemi oluşturmak


Duyarlı bir ızgara görünümü oluşturmaya başlayalım.

Öncelikle, tüm HTML öğelerinin box-sizing özelliği border-box değeri veriyoruz. Bu özellik, dolgu ve kenarlığın, elemanların toplam genişliğine ve yüksekliğine dahil eder.

* {
    box-sizing: border-box;
}

Aşşağıda ki örnekte, iki sütun içeren basit bir yanıt veren web sitemiz var:

css grid

.menu {
    width: 25%;

    float: left;
}
.main {
    width: 75%;

    float: left;
}

Yukarıdaki örnek, web sayfasının yalnızca iki sütun içermesi durumunda iyidir. Ancak, web sayfası üzerinde daha fazla kontrole sahip olmak için 12 sütun içeren duyarlı bir ızgara görünümü kullanmak istiyoruz.

Grid sisteminde bir sütun genişliği şöyle hesaplanır:

100% / Toplam Sütun Sayısı = 1 sütun genişliği

İlk olarak bir sütunun yüzdesini hesaplamalıyız:% 100/12 sütun =% 8.33

Daha sonra sütun genişliğini belirten ön eki class=col- veya istediğimiz bir takma isim ekleyerek Toplam Sütun Sayısı kadar sınıf tanımlarız.

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

Daha sonra sütunları sola kaydırmalı ve 10px dolgu eklemeliyiz:

[class*="col-"] {
    float: left;

    padding: 10px;

    border: 1px solid blue;
}

Float’ları Temizlemek


Grid sistemi sütunları satırları içerisinde yatay olarak sıralayacak. sütunlar onu içeren satırdan daha uzunza kabın dışına çıkacaktır; Bu yüzden bizde olası bir kötü görüntüyü ve bozukluğu önlemek için satırlar üzerinde bir temizlik işlemi yapmamız gerekecek. Bu işleme Clearfix deniyor.

.row::after {
    content: "";
    clear: both;
    display: table;
}

Her satır'a <div> etiketinde sütun tanımlayın. Bir satırdaki sütun sayısı her zaman 12'ye kadar olmalıdır:

...
...

Satır taşıyıcısı içindeki col- ile belirtilen sütunların toplamı Toplam Sütun Sayısını geçmemesi gerekir.

12 sütunlu bir grid sistemi tasarladığımızdan col-3 + col-9 = col-12 olması gerekiyor.

Grid sistemi örnek


* { 
    box-sizing: border-box;
    margin:0;
    padding:0;
   }

.row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float: left;
    padding: 10px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color:#3498db;
    color: #ffffff;
    padding: 15px;}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color: #33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 

                0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}

HTML :

<div class="header">
  <h1>WEBCEBİR.COM</h1>
</div>

<div class="row">

<div class="col-3 menu">
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>php</li>
    <li>jquery</li>
  </ul>
</div>

<div class="col-9">

  <h1>jquery</h1>

 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
 Optio deserunt molestiae sint neque ea et recusandae, eaque 
voluptatum adipisci praesentium illum suscipit, nulla deleniti
 iste. Natus sequi odit quis nulla!</p>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>

Örnekte görüldüğü gibi grid sistemi kullanmak web sayfasındaki bölümleri konumlandırmak için kolaylık sağlamaktadır.

DİKKAT: Tasarlamış olduğumuz grid sistemi tarayıcıyı küçülttüğümüzde veya cep telofonunda iyi görünmeyebilir. CSS medya sorguları makalesinde nasıl düzeltileceğine bakabilirsiniz.

önizleme buton

Responsive Web Tasarım Derslerine buradan ulaşabilirsiniz…

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

6127

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.