Temel - Izgara

Açıklama

Temel ızgara sistemi, sayfa boyunca 12 sütuna kadar ölçeklenebilir. Izgara sistemleri, içeriğinizi barındıran bir dizi satır ve sütun aracılığıyla sayfa düzenleri oluşturmak için kullanılır.

Izgara Seçenekleri

Aşağıdaki tablo, Foundation grid sisteminin birden fazla cihazda nasıl çalıştığını kısaca anlatmaktadır.

Küçük cihazlar Telefonlar (<640px) Orta ölçekli cihazlar Tabletler (> = 640 piksel) Büyük cihazlar Dizüstü Bilgisayarlar ve Masaüstü Bilgisayarlar (> = 1200px)
Izgara davranışı Her zaman yatay Başlamak için daraltıldı, kesme noktalarının üzerinde yatay Başlamak için daraltıldı, kesme noktalarının üzerinde yatay
Sınıf öneki .küçük-* .orta-* .büyük-*
Sütun sayısı 12 12 12
Nestable Evet Evet Evet
Ofsetler Evet Evet Evet
Sütun sıralaması Evet Evet Evet

Bir Temel Izgarasının Temel Yapısı

Aşağıdaki, bir Temel ızgarasının temel yapısıdır -

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

<div class = "row">
   ...
</div>
  • İlk olarak, yatay sütun grupları oluşturmak için bir satır sınıfı oluşturun.

  • İçerik, sütunların içine yerleştirilmelidir ve yalnızca sütunlar, satırların hemen alt öğeleri olabilir.

  • Izgara sütunları, yaymak istediğiniz on iki kullanılabilir sütunun sayısı belirlenerek oluşturulur. Örneğin, dört eşit sütun için .large-3 kullanırız

Aşağıdakiler, Temel ızgara sisteminde kullanılan üç sınıftır -

Sr.No. Temel Grid sınıfları ve Açıklama
1 Büyük

Orta serili * sınıfları büyük cihazlar için kullanılır.

2 Orta

Orta * sınıf ortamı cihazlar için kullanılır.

3 Küçük

small- * sınıfı küçük cihazlar için kullanılır.

Gelişmiş Izgara

Aşağıdakiler, Foundation'da kullanılan gelişmiş ızgara biçimleridir.

Sr.No. Gelişmiş Izgaralar ve Açıklama
1 Birleşik Sütun / Satır

Kolon ve sıra sınıfları, bir kap olarak kullanmak için tam genişlik sütun elde etmek için aynı eleman kullanılmaktadır.

2 Yuvalama

Izgara sütunlarını başka sütunların içine yerleştirebiliriz.

3 Ofsetler

Kullanılması büyük offset- * veya küçük offset- * sınıfını, sağa sütunları taşıyabilirsiniz.

4 Eksik Satırlar

Temel, satırlar 12'ye kadar sütun içermediğinde son öğeyi otomatik olarak sağa kayar.

5 Satırları Daralt / Daraltmayı Aç

Ortam sorgusu boyutunu kullanarak, dolguları göstermek için daraltma ve ayrıştırma sınıfları satır öğesine dahil edilir.

6 Ortalanmış Sütunlar

Sınıfı küçük merkezli sütuna dahil ederek , sütunu merkezde yapabilirsiniz.

7 Kaynak Sıralama

Kaynak sıralama sınıfı, sütunları kesme noktası arasında kaydırmak için kullanılır.

8 Blok Izgaraları

İçeriği bölmek için blok ızgara kullanılır.

Anlamsal Olarak Oluşturma

SASS karışımları kümesini kullanarak, kendi anlamsal ızgaranızı oluşturmak için kullanılan bir ızgara CSS oluşturulur. Daha fazla bilgi için buraya tıklayın

SASS Referansı

Aşağıdakiler, Foundation'da kullanılan grid için SASS referansıdır.

Sr.No. Temel Izgaralar ve Açıklama
1 Değişkenler

Sass değişkenlerini kullanarak bu bileşenin varsayılan stillerini değiştirebiliriz.

2 Mixins

Son CSS çıktısı, mixin kullanılarak oluşturulur.