Izgara Mülkiyet Nedir?

Izgara özelliği, ızgara şablonu şablon satırları, ızgara şablonu şablon sütunları, ızgara şablonu şablon alanları, ızgarası otomatik satırları, ızgarası otomatik sütunları, ızgarası otomatik akışı, ızgarası sütunu aralığı için bir kısa yol özelliğidir. ve ızgara satır aralığı özellikleri.

Izgara yapısı

Grid özelliği elemanların matris gibi gösterilmesini sağlar

 
 
 
 
 
 
 
 

Css'de

#container {
 ekran: ızgara;
 }

Örnekte, #container ızgara olarak gösteriliyor ve alt öğesi ızgara hücreleri veya öğeleri olarak gösteriliyor

Tarayıcı Uyumluluğu

IE, Edge, Firefox’un CSS grid özelliğini supports desteklemesi çok büyük bir heyecan. Çoğunlukla, tüm tarayıcı, geliştirici araçlarında güzel bir ızgara görünümüne sahiptir.

Izgara Çizgileri

Izgara çizgileri yatay ve dikey çizgilerdir, konumlandırma için kullanılırlar. Konumlandırma endeksi bir tamsayı olabilir (hem negatif hem de pozitif tamsayılar).

Özellikler → ızgara-sütun başlangıcı, ızgara-sütun sonu, ızgara-satır sonu, ızgara-satır sonu.

Basit kod :

#grid> div: nth-çocuğu (2) {
 ızgara-sütun-başlangıç: 2;
 ızgara-sütun sonu: 3;
 ızgara-satır başlangıcı: 2;
 ızgara-satır sonu: 3;
}

Element 2, ikinci dikey çizgide 2 yatay çizgide başlayacak ve element 3 dikey çizgide ve 3 dikey çizgide bitecektir.

Izgara hattı

Izgara hücresi

Bir ızgara hücresi, iki bitişik dikey ızgara çizgisi ile iki bitişik yatay ızgara çizgisi arasındaki boşluktur.

Izgara hücresi

Izgara İzleri

Izgara izi, bitişik iki ızgara çizgisi arasındaki boşluktur. yani satır, sütunlar.

Izgara İzi

Izgara Alanı ve Izgara Boşluğu

Izgara alanı, bir veya daha fazla hücrenin grubudur.

Izgara Boşluğu, satırlar ve sütunlar arasındaki boşluktur. Izgara-satır boşluğu ve ızgara-sütun boşluğunun kestirme özelliği.

Izgara Satırı ve Izgara sütunu

grid-row, grid-row-start ve grid-row-end için kısayol özelliğidir.

grid-column, grid-column-start ve grid-column-end için kısayol özelliğidir.

Izgara satır

grid-row-start → bir ızgara öğesinin satırdaki başlangıç ​​konumunu belirtir

eg.grid-row-start: 2 → Eleman ikinci dikey satırda başlayacak

ızgara-satır sonu → bir ızgara öğesinin satırdaki bitiş konumunu belirtir

eg.grid-row-end: 3 → Eleman ikinci dikey çizgide bitecek

Izgara otomatik akış

Otomatik yerleştirme algoritmasının nasıl çalıştığını kontrol eder. Varsayılan olarak, değer satırdır (Öğeler satır bazında yerleştirilir)

Izgara otomatik akış: satır;
Izgara otomatik akış: kolon;
Izgara otomatik akış sütunu ve ızgara otomatik akış satırı

grid-auto-flow: satır yoğun → “yoğun” paketleme algoritması kullanır. Izgaradaki boş alanı satır bazında doldurun.

grid-auto-flow: sütun yoğun → “yoğun” paketleme algoritması kullanır. Izgaradaki boş alanı sütun bazında doldurun

Açık Izgara ve Kapalı Izgara

Açık ızgara, ızgara-şablon-satır, ızgara-şablon-sütunlar kullanılarak kullanıcı tarafından oluşturulan ızgaradır.

ızgara-şablon-sütunlar: tekrar (3, 100px);
ızgara-şablon satırları: 100 piksel 100 piksel;

Örtük ızgara, tarayıcı tarafından oluşturulur. Kapalı ızgaraların boyutu, ızgara-otomatik sütunlar ve ızgara-otomatik satırlar özelliği kullanılarak değiştirilebilir.

ızgara-şablon-sütunlar: tekrar (3, 100px);
ızgara otomatik satırlar: 100 piksel;

Izgara siparişi:

Öğeyi template area özelliğine göre sipariş edebiliriz.

medya sorgusunda şablon alanını değiştirebilir ve yeni ızgara yapısını görüntüleyebiliriz.

codepen'i daha fazlası için kontrol edin.

Izgara için çoğunlukla hepimiz bootstrap ızgara sistemini kullanıyoruz. Bootstrap, her sürümde bazı sınıf isimlerini değiştirebilir (Ancak Açısal Olarak Değil), Bu nedenle hangi sürümün hangi sınıf adına sahip olduğunu need hatırlamamız gerekir.

CSS grid özelliğini kullanarak, CAN (IE 'de bile) elementleri kolayca grid görünümünde gösterebiliriz.

Okuduğunuz için çok teşekkürler! Eğer beğendiyseniz, lütfen cla'ı alkışlayarak ve gönderiyi paylaşarak destekleyin. Aşağıda bir yorum bırakmaktan çekinmeyin.