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.

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

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:

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

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

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.

Responsive Web Tasarım Derslerine buradan ulaşabilirsiniz…

[class*="col-"] {
  float: left;
  padding: 10px;
  border: 1px solid blue;
}