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:


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

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…

Engin ateş 02/05/2020

Ben yaptım yukardakini fakat çizgiler duruyor bende, sizdeki önizlemede çizgiler yok nsıl gidecek onlar?

yönetici 02/05/2020

Aşağıdaki kodlardan border'ı sil.

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

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

4062

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
  • Git
  • React
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML FORM OLUŞTURMA
  • CSS YATAY MENÜ YAPIMI
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML DİV ve SPAN NEDİR?
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.