CSS Izgara Düzeninde Öğeleri Taşıma [Guide]
Kullanmak CSS Izgara Düzeni Modülü web tasarımında gittikçe daha fazla tarayıcı başladığında giderek daha uygulanabilir hale geliyor onu destekle. Izgara hücrelerini dolduran düzenler oluştururken, daha karmaşık şeyler elde etmek istediğinizde bir an gelebilir.
Örneğin, isteyebilirsiniz hafifçe hareket et ızgara öğelerinin bazıları ızgara alanlarına sıkışmış. Ayrıca isteyebilirsiniz onları ızgara kabından çıkar (taşma) veya üst üste (örtüşme) veya sadece… etrafta boş bir yere.
Yani, bu yazıda size nasıl yapabileceğinizi göstereceğim ızgara öğelerini taşıma, sipariş etme, taşma, örtüşme ve boyutlama CSS Izgara Düzeni Modülünü kullandığınızda.
Bir CSS ızgarası oluşturun
İlk önce basit bir CSS ızgarası oluşturalım. bir satır ve üç sütun.
HTML'de, grid kabının bulunduğu bir grup divs yaratıyoruz üç ızgara öğesini içerir.
CSS'de ızgara kabı var ekran: ızgara; özellik ve ızgara öğeleri var ızgara alanı Bu, ızgara öğesi alanlarının adlarını tanımlayan.
Ayrıca biz ekle Izgara şablon alanlar özellik ızgara alanı adlarının kullanıldığı ızgara kabına ızgara alanlarını temsil ettikleri ızgara hücrelerine atama.
Tüm sütunlar bir kesir büyüklüğünü almakfr) Kabın genişliği, ızgara öğelerinin tutulmasını sağlar.
.ızgara kabı ekran: ızgara; grid-template-fields: 'sol orta sağ'; ızgara-şablon-sütunlar: tekrar (3, 1fr); ızgara-şablon satırları: 80 piksel; ızgara aralığı: 5 piksel; genişlik: 360px; arkaplan rengi: macenta; .grid-left ızgara alanı: left; .grid-center ızgara alanı: merkez; .grid-right ızgara alanı: sağ; .grid-container div arka plan rengi: açık yeşil;
Taşma ızgara öğeleri
Bir ızgara öğesi yapabilirsiniz ızgara kabını taşması Bir düzen için gerekliyse. Taşma efekti elde etmek için, yapmanız gereken farklı bir sütun boyutu kullan:
.ızgara kabı ekran: ızgara; grid-template-fields: 'sol orta sağ'; ızgara-şablon-sütunlar: tekrar (3, 150 piksel); ızgara aralığı: 5 piksel;
sütun ve boşluk boyutunun toplamı daha büyük kabın genişliği, bu da ızgara öğelerinin konteynerini taşmasına neden olur.
Izgara öğelerini üst üste binme
bir ızgara öğesi üst üste gelebilir (tamamen veya kısmen kapak) başka bir ızgara öğesi aşağıdaki durumlarda:
- Başka bir ızgara öğesinin hücresi (hücreleri) arasında yayılacak (ve üzerinde) olacak şekilde ayarlanmış.
- Büyüklüğü arttırılarak yakındaki ızgara öğesiyle üst üste gelmesine neden oldu.
- Başka bir ızgara öğesinin üstüne taşındı.
İkinci ve üçüncü vakaları daha sonra “boyutlandırma” ve “Hareketli” bölümler.
İlk önce, bir ızgara öğesinde ilk vakayı görelim diğerine yayılmış.
Merkezdeki ızgara öğesinde sol tarafa yayılmış, bu yüzden ekranda yalnızca iki öğe görünür.
.ızgara merkezi ızgara alanı: merkez; ızgara sütunu: 1/3;
Izgara sütunlu ve Izgara sıralı özellikleri ızgara çizgileri ata hangi sütun ya da satırın sığması gereken.
Aşağıdaki diyagramda nasıl olduğunu görebilirsiniz ızgara sütunu: 1/3 CSS kuralı işe yarar: orta sütun ızgara çizgileri 1 ve 3 arasındaki boşluklar. Sonuç olarak, orta sütun sola üst üste gelir.
Izgara öğelerini taşı
Demek istediğim öğeleri hafifçe dolaştırmak. Bir öğeyi tamamen başka bir ızgara hücresine / alana taşımak istiyorsanız, ızgara oluşturma kodunu güncellemenizi öneririz.
Izgara öğelerini dolaşmak basittir. Sadece kullan kenar, dönüştürmek, ya da konum: göreceli; özellikleri. Öğelerin bu özellikleri kullanarak nasıl taşındığını aşağıya bakın.
Orta ve sağ ızgara öğeleri (yukarıda gösterildiği gibi) aşağıdaki şekillerde hareket ettirilebilir:
1. kullanma kenar
Olumsuz kenar boşlukları ızgara öğelerinin boyutlarını artırırken, olumlu kenar boşlukları bunları azaltır. Her ikisinin bir kombinasyonunu kullanarak, ızgara öğelerini etrafta dolaştırabilirsiniz..
.ızgara merkezi ızgara alanı: merkez; sol kenar boşluğu: -10px; sağ kenar: 10px; kenar boşluğu: -10px; marj-alt: 10 piksel; .grid-right ızgara alanı: sağ; sol kenar boşluğu: 10 piksel; sağ kenar boşluğu: -10px; kenar boşluğu: -10px; marj-alt: 10 piksel;
2. kullanma dönüştürmek
Çevirmek() CSS işlevi bir öğeyi x ve y eksenleri boyunca hareket ettirir. İle birlikte kullanmak dönüştürmek özellik, bir kılavuz öğesinin konumunu değiştirmenize olanak sağlar.
.ızgara merkezi ızgara alanı: merkez; dönüşümü: çevir (-10px, -10px); .grid-right ızgara alanı: sağ; dönüşüm: tercüme (10px, -10px);
3. kullanma pozisyon
Kullanmak pozisyon: göreceli; belirtilen kural üst, alt, ayrıldı, ve sağ özellikleri ızgara öğelerinin etrafında hareket etmek için de kullanılabilir.
.ızgara merkezi ızgara alanı: merkez; pozisyon: göreceli; alt: 10 piksel; sağ: 10 piksel; .grid-right ızgara alanı: sağ; pozisyon: göreceli; alt: 10 piksel; sol: 10 piksel;
Izgara öğelerini sipariş etme
Izgara öğeleri ekranda işlenir HTML kaynak kodunda göründükleri sırayla.
Önceki bölümde, merkez öğe sola taşındığında, tarayıcı tarafından sol öğenin üzerine yerleştirildi. Bu oldu çünkü HTML’de, Ancak yapabiliriz sipariş ızgara öğelerini değiştirme kullanmak Kullanmak CSS Izgara Düzeni modülünde olduğu gibi, HTML'deki öğe sırasını değiştirme ızgara düzenini etkilemez, ayrıca koyabilirsin Izgara öğesi için otomatik boyutlu satırlar veya sütunlar kullanıyorsanız ( Unutmayın, örnek ızgaramızda, üç sütunun da bir kesimi aldığını ( Burada sol öğenin boyutunu değiştiriyoruz kullanmak Burada sol öğenin boyutunu değiştiriyoruz kullanmak Z-endeksi ya da sipariş CSS özellikleri.
z-endeksi: 1; kural, sol ızgara öğesi daha yüksek istifleme bağlamı var.. ızgara solu ızgara alanı: sol; z-endeksi: 1;
Boyut ızgara öğeleri
Oto, fr, gr birimler), büyümüş olan komşu ürününe yer açmak için küçülecek Yalnızca söz konusu öğe ölçülmedi dönüştürmek veya negatif bir marj.frızgara kabının). Soldaki öğenin iki farklı şekilde yeniden boyutlandırılmasından sonra üç öğenin nasıl göründüğüne bakın.1. ile Ölçeklendirilmiş
Genişlik ve yükseklikGenişlik ve yükseklik özellikleri. Sonuç olarak, ızgara kabının içinde kalır..
.ızgara solu ızgara alanı: sol; genişlik: 200px; yükseklik: 90px;
2. ile Ölçeklendirilmiş
dönüştürmekdönüştürmek özellik. Sonuç olarak, kabın üzerinden taşar ve ızgara boşluğu da kaybolur.
.ızgara solu ızgara alanı: sol; dönüşüm: skaleks (1.8);
