CSS Izgara Düzeni Modülüne Giriş

Bir Zamanlar tablolar, sonra kenar boşlukları ve yüzen, sonra FlexBox ve şimdi Kafes: CSS her zaman asırlık işini kolaylaştırmak için yeni ve daha iyi yollara yöneldi web düzenlerini kodlama. CSS Izgara Düzeni Modeli düzenini oluşturabilir ve güncelleyebilir iki eksen boyunca: Yatay ve dikey, hem genişlik hem de yüksekliği etkileyen elemanların.

Izgara düzeni işaretlemedeki öğelerin konumuna bağlı değildir, bu nedenle öğelerin yerleşimlerini karıştır düzeni değiştirmeden biçimlendirme. Izgara modelinde, bir ızgara kabı elemanı ızgara sütunlarına ve satırlarına bölünmüş (topluca bilinir ızgara izleri) tarafından ızgara çizgileri. Şimdi nasıl yapılacağını görelim örnek bir ızgara oluşturmak.

Tarayıcı desteği

Bu makaleyi yazarken CSS Izgara Modülü yalnızca en yeni IE tarayıcısı ve Edge tarafından desteklenmektedir. CSS Izgarası deney aşamasında mecbur olduğunuz diğer büyük tarayıcılarda desteği el ile etkinleştir:

• Firefox: Üst Krkt + F2 tuşlarına basın, aşağıdaki komutu girin tarayıcının altında görüntülenen GCLI giriş çubuğuna: pref set layout.css.grid.enabled true.
• Krom: Göz atın chrome: // flags URL ve etkin Deneysel Web Platformu özellikleri.

Tüm büyük tarayıcı desteğinin büyük olasılıkla 2017 yılının başında / ortasında gelin.

Örnek bir ızgara

için bir elemanı ızgara kabına çevirmek kullanabilirsiniz bunlardan biri Görüntüle özellikleri:

1. ekran: ızgara; - eleman bir blok ızgara kabına dönüştürülmüş
2. ekran: satır içi ızgara; - eleman satır içi ızgara kabına dönüştürülür
3. ekran: alt ızgara; - eğer eleman bir ızgara öğesi ise bir alt ağa dönüştürülmüş Bu, grid şablonunu ve grid boşluk özelliklerini yok sayar.

Bir masa birden fazla masa hücresinden oluştuğu gibi, bir ızgara çoklu ızgara hücrelerinden oluşur. Bir ızgara öğesi bir dizi ızgara hücresine atanmış topluca bilinen ızgara alanı.

Biz yaratacağız beş bölümden oluşan bir ızgara (ızgara alanları): üst, alt, sol, sağ ve orta. HTML’den oluşur bir konteyner div içinde beş divs.

 
 
Üst
 
Ayrıldı
 
merkez
 
Sağ
 
Alt
 
 

CSS’de Izgara şablon alanlar özellik Farklı ızgara alanlarına sahip bir ızgarayı tanımlar.. Değerinde, bir dize ızgara satırını temsil eder. ve Bir dize içindeki her geçerli ad bir sütunu temsil eder.. için boş bir ızgara hücresi oluştur kullanman gerek nokta (.) karakter bir satır dizesi içinde.

ızgara alanı adları tarafından referans alınacak ızgara alanı bireysel ızgara öğelerinin özelliği.

 .ızgara kabı genişlik: 500 piksel; yükseklik: 500px; ekran: ızgara; ızgara-şablon alanları: "üst üst üst" "sol orta sağ" "alt alt alt";  .grid-top ızgara alanı: top;  .grid-bottom grid alanı: alt;  .grid-left ızgara alanı: left;  .grid-right ızgara alanı: sağ;  .grid-center ızgara alanı: merkez;  

Yani bu kod yaratır üç satır ve sütun içeren bir ızgara. üst öğe yayılan bir alanı kaplar ilk satırda üç sütun ve alt Öğe yayıldı son satırda üç sütun. Her biri ayrıldı, merkez ve sağ ürün alır orta satırda bir sütun.

Şimdi ihtiyacımız var boyutları ata bu satırlara ve sütunlara. Izgara şablon sütunlar ve Izgara şablon satır özellikleri ızgara izinin boyutunu tanımlayın (satır veya sütun).

 .ızgara kabı genişlik: 500 piksel; yükseklik: 500px; ekran: ızgara; ızgara-şablon alanları: "üst üst üst" "sol orta sağ" "alt alt alt"; ızgara şablonu şablon sütunları: 100 piksel otomatik 100 piksel; ızgara-şablon satırları: 50 piksel otomatik 150 piksel;  

CSS ağımız şimdi şöyle görünüyor (bazı ek stillerle):

Izgara öğeleri arasındaki boşluk

Ekleyebilirsin sütunlar ve satırlar arasındaki boşluk kullanma Izgara kolon boşluğu ve Izgara satır boşluğu, veya onların el yazısı mülkiyeti Izgara boşluk.

 .ızgara kabı genişlik: 500 piksel; yükseklik: 500px; ekran: ızgara; ızgara-şablon alanları: "üst üst üst" "sol orta sağ" "alt alt alt"; ızgara şablonu şablon sütunları: 100 piksel otomatik 100 piksel; ızgara-şablon satırları: 50 piksel otomatik 150 piksel; ızgara aralığı: 5px 5px;  

Aşağıda görebilirsiniz Izgara boşluk mülk gerçekten ızgara öğeleri arasında boşluklar ekledi.

Izgara içeriğini ve öğelerini hizalama

haklı-content ızgara kabının özelliği (.Izgara konteyner) ızgara içeriğini hizalar satır içi eksen boyunca (yatay eksen) ve özellik hizalamak-content, kılavuzun içeriğini hizalar blok ekseni boyunca (dikey eksen). Her iki özellik bu değerlerden birine sahip olabilir: başla, son, merkez, arasındaki boşluk, uzay-etrafında ve yer eşit.

Uygun olduğunda, iz (satır veya sütun) boyutu içeriğe uyacak şekilde küçülür hizalandığında. Izgara içeriğinin ekran görüntülerine bir göz atın farklı değerlerle hizalanmış altında.

haklı içerik: başlangıç;

haklı içerik: son;

haklı içerik: merkez;

haklı içerik: boşluk arasındaki;

haklı içerik: boşluk etrafında;

haklı-içerik: boşluk-eşit;

hizalama içeriği: başlangıç;

hizalama içeriği: son;

hizalama içeriği: merkez;

hizalama içeriği: aradaki boşluk;

hizalama içeriği: boşluk etrafında;

hizalama içeriği: alan-eşit olarak;

İkisi de haklı-content ve hizalamak-content özellikleri içeriğin tamamını bir ızgara içinde hizalayın.

için öğeleri tek tek ızgara alanlarına hizalayın, kullan diğer hizalama özellikleri çifti: -Öğeleri haklı ve -Öğeleri hizalamak. Her ikisi de bu değerlerden birine sahip olabilir: başla, son, merkez, başlangıç (alanın temel ızgara çizgisi boyunca öğeleri hizalayın) ve Uzatmak (öğeler tüm alanlarını doldurur).