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.