Foundation 6 Grid Yapısı

  • Günümüzde mobil internet kullanıcı sayısı her geçen yıl hızla artış göstermektedir. Web sitelerinin masaüstü görünümü ile birlikte mobil görünümü de artık oldukça önemlidir. Bir web sitesi hazırlandığında masaüstü veya dizüstü bilgisayar üzerinde sorunsuz görünürken mobil görünümünde sıkıntılar veya kaymalar olabiliyor. Bu yüzden responsive tasarım oldukça önemlidir. Responsive tasarım ile birlikte mobil, tablet, dizüstü veya masaüstü bilgisayarların hepsini uyumlu bir tasarım yapabiliriz.
  • Foundation 6 ile tüm ekran genişliklerine uygun responsive tasarımlar yapabiliriz.
  • Foundation 6’da 12’li Grid Sistemi kullanılır. Grid Yapısı Bootstrap’a oldukça benzemektedir. Satır ve sütunlardan oluşan bir yapısı vardır. Bootstrap’da satırları ifade etmek için row, sütunları ifade etmek için col kullanılır. Foundation 6’da ise row yerine grid-x, col yerine cell kullanılır.

Bootsrap Grid Yapısı

<div class="row"> 
    <div class="col-md-4">Hücre</div>
    <div class="col-md-4">Hücre</div>
    <div class="col-md-4">Hücre</div>
</div>		

Foundation 6 Öncesi Grid Yapısı (Foundation 5 ve Öncesi)

grid-x, grid-y, cell gibi grid yapılarına ait terimler Foundation 6 ile birlikte gelmiştir. Foundation 6 öncesi row satırları ifade ederken, columns sütunları ifade etmekteydi.

<div class="row">
   <div class="columns small-4">Hücre</div>
   <div class="columns small-4">Hücre</div>
   <div class="columns small-4">Hücre</div>
</div>

Foundation 6 Grid Yapısı

<div class="grid-x">
  <div class="cell small-4">Hücre</div>
  <div class="cell small-4">Hücre</div>
  <div class="cell small-4">Hücre</div>
</div>

Aşağıdaki gibi hücrenin kaça bölüneceği belirtilmezse tüm satırı kaplar.

<div class="grid-x">
   <div class="cell">Hücre</div>
   <div class="cell">Hücre</div>
</div>
303 Views
41920cookie-checkFoundation 6 Grid Yapısı

Leave a Reply

Your email address will not be published. Required fields are marked *