Yeni Başlayanlar için En İyi CSS Izgara Eğitimi (Etkileşimli Örneklerle)

Kutunun düzeni, uygun işaretleme değişikliklerini gerektirmeden görsel düzen yapısındaki dramatik dönüşümlere izin verir.
CSS ızgara düzeni, öğelerin üst üste binmeyi kolaylaştırır ve tablo tabanlı bir düzen yaparken bazılarımızın yıllar önce yaptıklarına benzer şekilde uzanma yeteneğine sahiptir. Ve en iyisi, kutu düzeni, minimum sayıda kodla iki sütun düzeni gibi genel tasarımlar oluşturmanıza olanak tanır. Bu noktaları hatırlayarak, bu Grid CSS düzeninin temel öğreticisini mülke ve değerine bakarak girelim.
Yukarı git
CSS kutusu düzeni terimi, kutu düzeninin çeşitli yönlerini ve öğe kutusunun işlevi şeklini anlamanıza yardımcı olacak bir dizi terim kullanılarak belirlenir. İşte bu CSS Izgara Eğitimi için hatırlamak istediğiniz anahtar terim:
Kafes oluşturan ve çocuk kutularının kutularını kutu kabına saran kutu kapları
Izgara Çizgileri – Izgarayı bölen yatay ve dikey çizgiler
Izgara İzleri – Her sütun veya ızgara satırı (yani ızgara çizgisi arasında olanlar)
Izgara hücresi – tek hücre, tabloda olduğu gibi, sütunların ve satırların kesiştiği
Izgara Alanı – Bir veya daha fazla hücrenin her dikdörtgen alanı, dört ızgara çizgisine bağlı
Aşağıdaki bölüm boyunca yukarıdaki terimlerden bazılarını kullanacağım, bu yüzden demo ve kodu okuduğunuzda bunu hatırlayın.
Yukarı git
Kutu Düzenleri için Kutu Düzeni Özelliği Kutu Düzeni Özelliklerinin Çeşitli Kısımlarını incelerken, hangi özelliklerin kutu kapları için ve hangilerinin kutu öğeleri için olduğunu hatırlamak için yararlı olacaktır.
Bu CSS GRID öğreticisinde, önce ızgara kabına uygulayacağınız mülkü tartışacağım. Bunlar aşağıdaki gibidir:
ızgara-test-sıralar
Izgara kolonları
ızgara bölgesi
Yukarı git
Bir kafes kabı oluşturma: Ekran: ızgara Flexbox’a benzer, kutu düzeninin kapasitesini etkinleştiren ana özellik, ekran özelliği için belirli bir değerden geçer.
.Grid-Container {ekran: ızgara; }
Kod Dili: CSS (CSS) Kod ile .grid-Container öğesi aşağıdaki özelliklere sahip olacaktır:
Son Biçimlendirme Bağlamı Oluşturma
Izgaradaki öğe bir ızgara öğesi haline gelir (“Esnek Öğe” fikrine benzer)
İçerik, her kafes alanı etrafında bir sınır oluşturan bir kafes çizgisine sahip bir kafesten oluşur.
Aşağıdaki özellikler öğe ızgarasını etkilemez: şamandıra, net, dikey hizalama
Marj bir kutu kapta çökmez
Tek başına, ekran: Grid, aşağıdaki etkileşimli demoda görebileceğiniz pek çok şey yapmayacaktır: ortaya çıkan tek küçük değişikliğe dikkat edin, ekranı etkinleştirdiğinizde marjın daha büyük görünmesidir: ızgara. Bunun nedeni, bir blok elemanı olup olmadıklarına kıyasla kafes öğesinin etrafında çöken marjların eksikliğinden kaynaklanmaktadır. Izgara öğesindeki marjı silerseniz, ekranı etkinleştirdiğinizde düzende değişiklik olmayacaktır: ızgara.
Yukarı git
Izgarayı tanımlama: Kafes kabı takıldıktan sonra ızgara-tövbe-sıralar ve ızgara-test-sütunlar, kafesiniz için satırları ve sütunları belirlemek istersiniz. Izgara-test-sıralar ve ızgara-test-sütunlar özelliği yaklaşık iki şeyi tanımlar:
Kafes pist boyutu (sütun veya satır)
Satırların İsimleri (İsteğe bağlı) (daha sonra ayrıntılı olarak tartışılmıştır)
PX uzunluğunu ve satır adını kullanmanın basit bir örneği aşağıdaki gibidir:
Konteyner {ekran: ızgara; Izgara Teslim Sıraları: 120px 120px; Izgara Testi Sütunları: 400px 100px 100px 194px; }
Kod Dili: CSS (CSS) Bu kod, tarayıcıya aşağıdakileri yapmasını söyler:
Her biri 120 piksel yüksekliğe sahip iki satır
Genişliği 400 piksel, 100px, 100px ve 194px’li dört sütun
Bu kasten garip bir şekilde spesifik, bu yüzden bu ideal değil. Ancak bu, satırların ve sütunların nasıl tanımlandığını göstermeye yarar. Aşağıdaki demo bunu eylemde göstermektedir:
Her iki özellik de aşağıdaki işlevler ve anahtar kelimelerle birlikte Yok Anahtar Kelime (Varsayılan) ve Otomatik Değeri de kabul edin:
fit-content ()
Minmax (Min, Maks) – Satırlar veya sütunlar için boyut aralığını belirlemek için
Maxcontent
Mincontent
Ayrıca şunlarla da ilgilenebilirsiniz:
Ücretsiz WordPress ve Beaver Builder ile bir açılış sayfası nasıl yapılır
WordPress sitenizin neden yapışkan bir kullanıcı arayüzü öğesi olması ve nasıl yapılacağı olmalıdır?
Öğretici Wix: Yeni başlayanlar için Wix nasıl kullanılır hakkında Step-Demi-Adım Kılavuzu
Yukarı git
Esnek uzunluk değerleri olarak da adlandırılan FR üniteleri FR üniteleri olan satır ve sütunların boyutunun belirlenmesi, ızgara-temptic-temptic-template sütunları özelliğine uygulayabileceğiniz daha kullanışlı birimlerden biridir.
Adından da anlaşılacağı gibi, FR ünitesi kutu kabında kalan alanın küçük bir bölümünü temsil eder. İşte örnekler:
Konteyner {ekran: ızgara; Izgara-Tesplat-Sıralar: 1.5 FR 1 FR; Izgara-TEMPLE sütunları: 3.4 fr 1 fr 1 fr 2 fr; }
Kod Dili: CSS (CSS) önceki örneğe benzer, bu bir kez daha iki -ilim kafes ve dört sütun yapar. FR ünitesinin ondalık değerler şeklinde olabileceğini unutmayın. Aşağıdaki demoda deneyin:
Bölünmüş alanın, diğer öncelik düzen faktörlerinden sonra hesaplanan mevcut alana dayandığını unutmayın.
Yukarı git
Adlandırılan ızgara alanını belirleyin: Izgara-Tesplat-Araca ızgara kabında kullanılan diğer özellikler, faydalı olduğunu düşündüğünüz ızgara-test-IS özelliğidir. Bu bir veya daha fazla dize değeri alır, bu yüzden ilk başta oldukça garip görünebilir. Ama ne yaptığını anlamak kolay.
Konteyner {ekran: ızgara; Izgara-Tespit Sıraları: 1 FR 1 FR 1 FR 1 FR; Izgara-TEMPLE sütunları: 1 FR 2 FR; Izgara -TEMPLAT -ASAS: “Head Head” “Nav Play” “Nav Play” “Nav Foot”; } .item: nth-child (1) {ızgara bölgesi: kafa; } .item: nth-child (2) {ızgara bölgesi: Main; } .item: nth-child (3) {ızgara alan: nav; } .item: nth-child (4) {ızgara bölgesi: ayak; }
Kod Dili: CSS (CSS) ızgara -TEMPLAT -ASAS’taki her dize değeri ızgaradaki bir satırı temsil eder. Her dizedeki boşluklarla ayrılan her değer kümesi, ızgaradaki sütunu temsil eder. Bu dizideki her kafes öğesinin adı, belirli bir HTML öğesiyle eşlenir. Yukarıdaki koda dikkat edin, hangi HTML öğelerinin her bir ızgara alanını temsil edeceğini belirlemek için ızgara alan özelliğini de kullanır. Bir sonraki demo bunu biraz daha net hale getirmelidir. Gördüğünüz gibi, bu teknik aşağıdakileri gerektirir:
Satırları, sütunları ve satırları/sütunları temsil eden bir veya daha fazla ip
Dizede belirtilen adla eşleşen ızgara bölgesi öğeleri
Hedef öğeleri hedeflemek için sahte bir sınıf: nth-child () kullanıyorum, ancak geçerli CSS’yi (örneğin, öğeye uygulanan sınıf) kullanabilirsiniz. Bazı durumlarda, bir veya birkaç kafes hücresinin içerik olmadan boş alanı temsil etmesini isteyebilirsiniz. Bu durumda, bunu aşağıdaki sözdizimiyle gösterebilirsiniz (puanlara dikkat edin):
Konteyner {ekran: ızgara; ızgara -templat -isas: “kafa kafası” “…. oyun” “nav ….” “nav foot”; }
Kod Dili: CSS (CSS) Aşağıdaki demoda deneyebilirsiniz:
Aralarında boşluklar olmadan bir veya birkaç noktalı hücreler için boş alan gösterebilirsiniz (sıralı boş hücreleri belirlemediğiniz sürece). Her boş hücre için alanı doldurmak için dört nokta kullandım, böylece alanın adı görsel olarak sıralandı. Izgara -TEMLATE kullanımı hakkında dikkate alınması gereken diğer bazı şeyler -ISAS:
Dizede uygun adlı ızgara hücresi, geçerli olması için bir dikdörtgen oluşturmalıdır (örneğin “L” şeklini geçersiz kılan “Nav” adlı üç hücre) tüm ızgara hücrelerini belirlemeli veya boş alan göstermek için bir nokta kullanmalısınız.
Aynı addaki alanı bağlamanız gerekir (örneğin, birinci satırda “nav” ve üçüncü satırda “nav” olamazsınız)
Tırnaklardaki ip, boşluktan ayırdığınız sürece bir satırda olabilir; Bunları farklı satırlara yerleştirmek, ızgarayı görselleştirmeye yardımcı olur
Yukarı git
Dahil olarak belirlenmiş ızgara izleri: ızgara-ağ-oto-sütunlar, satır veya sütun ızgara-test-rows veya ızgara-test-kolonlar özelliği kullanılarak açıkça tanımlanmazsa, ızgarayı kullanarak dolaylı olarak tanımlama seçeneğiniz vardır. -Otomatik LOW’lar ve ızgara-otomatik sütunlar. Aşağıdaki kod şunu gösterir:
Konteyner {ekran: ızgara; Izgara -TEMPLAT -ASAS: “Head Head” “Nav Play” “Nav Play” “Nav Foot”; Izgara-ağa: Minmax (otomatik, 75px); Izgara-otomatik sütunlar: Minmax (otomatik, 394px); }
Kod Dili: CSS (CSS) Bu durumda, satırlar ve sütunlar için minimum ve maksimum değeri belirlemek için Minmax () işlev değerini kullanıyorum. Bu örnekle, tüm hatlarım maksimum 75 piksel olacak ve tüm sütunlarım mevcut alana bağlı olarak maksimum 394 piksel olacak. Bu değerler geçerli uzunluk değerleri şeklinde olabilir. Kodu aşağıdaki Codepen’de deneyebilirsiniz:
Gösterideki ızgara, önceki bölümle aynı kafes alanını kullanmaya başlar. Anahtar düğmesi, satırlar ve sütunlar için örtük boyutu etkinleştirir.
Uzunluk ve yüzde değerine ek olarak, ızgara-ağ-rows ızgara-otomatik sütunlar için olası değer şunları içerir: Auto (varsayılan)
Min
Maksimum
fit-content ()
Esnek değer (yani FR ünitesini kullanan)

Minmax (Min, Max)
Özelliklerden biri için, yukarıdaki değerlerden birini kullanarak, parçaya ayrılmış alanların bazı boyutlarını belirleyebilirsiniz. Yani aşağıdakiler geçerli olacaktır:
. Container {ızgara-auto-lows: max-content otomatik; Izgara-otomatik sütunlar: 2 fr 3 fr 1 fr; }
Kod Dili: Yukarıdaki CSS (CSS), iki sıra ve üç sütun için bir boyut olacaktır, bu, ızgarayı Izgara Impable-Rows ve ızgara-TEMPLATE kullanarak ızgarayı tanımlarken satırın boyutuna ve açık boyutlu bir sütuna benzer. -Columns.
Yukarı git
Otomatik olarak ayarlanan ızgara öğeleri: ızgara-akış Sizin için yararlı olabilecek otomatik boyutla ilişkili son özellik ızgara-akışlı özelliğidir. Bu özellik, bir ızgara öğesini otomatik olarak boş bir alana yerleştirmenizi sağlar, boş olabilecek bir boşluk, çünkü daha önce kaynak sırasına göre daha büyük öğe uymadığı için. Değerler:
Satır – Her satırı doldurmak için öğeler yerleştirilir, gerektiğinde yeni çizgiler ekleyin
Sütun – Her sütunu doldurmak için öğeler yerleştirilir, gerektiğinde yeni bir sütun ekleyin
Yoğun – Gerektiğinde deliği doldurmak için öğeler yerleştirilir, daha küçük bir öğeyle, daha sonra kaynağın sırasına göre boş bir noktaya itilir
Aşağıdaki demoyu kullanmayı deneyin:
Düzenin seçilen değere göre nasıl değiştiğini unutmayın, ancak kaynak dizisinin nasıl değiştiğine de dikkat edin (öğe, doğal HTML dizisini ızgara sırasıyla karşılaştırabilmeniz için görüntülenen numaraya sahiptir).
Kafes öğesi için kutu düzeninin üstüne gitmek, CSS kutusu düzeninin öğreticisinde şimdiye kadar tartışılanların çoğu, kutu öğesini tutan kutu kabına doğrudan uygulayacağınız bir özelliktir. Aşağıdaki bölüm, ızgara öğesine uygulanan özelliği görecektir (yani kafes kabından çocuklar):
Izgara
ızgara
Izgara sütunu başlatma
ızgara sütun sonu
ızgara alanı
Yukarı git
Izgara Öğeleri Yerleştirme: Izgara sıralı-start / ucu ve ızgara sütunu başlat / ucu Belirli bir ızgara öğesi ızgarasında nerede başlaması veya bitmesi gerektiğini belirlemenizi sağlayan dört özellik vardır:
Izgara
ızgara
Izgara sütunu başlatma
ızgara sütun sonu
Nasıl çalıştığını anlamak için algoritmanın kafes çizgisini nasıl hesapladığını anlamak önemlidir. Aşağıdaki grafiği düşünün:
Algoritmanın kafes çizgisini nasıl hesapladığını görselleştirin
Yukarıdaki resimde 4 × 4 kutu 16 kutu öğesi görüntülenir. Kırmızı ve mavi çizgiler ızgara çizgisini temsil eder. Her satırdaki sayılar, bu çizgilerin nasıl hesaplandığını temsil eder. Birkaç şey göreceksiniz:
Tek kafes hücreleri iki kafes çizgisine dokundu
Negatif bir değer kullanırken, kafes hattı geriye doğru sayılır
Tüm bunlar farklı yazma modunda yatay ve/veya dikey olarak tersine çevrilecek
Tüm kafes yerleştirme özellikleri otomatik değeri veya aşağıdakilerden biri alır:
Pozitif veya negatif tamsayılar sıfır değil