CSS Grid neden Bootstrap çerçevesinden daha iyi? Modası geçmiş yaklaşımlar ve modern standartlar arasındaki fark. Ekranı kullanma: tablo numarası

Div # navbar ul (liste stili: yok; ekran: blok; kenar boşluğu: 0 10px;) div # navbar ul li (kayan nokta: sol; kenar boşluğu: 0 1.5em; yazı tipi: kalın 1em Arial;)

Güzel! Bizimle her şey yolunda gidiyor. Geriye sadece bir poster ve site sunumu olan bir blok kaldı, ancak bunları uygulamaya başlamadan önce, genel olarak CSS çerçeveleri hakkında birkaç şey söylemek istiyorum.

3. CSS çerçeveleri tüm sorunlarınızı çözmez

Bir CSS çerçevesi üzerinde tasarım düzeni yapmaya başlamadan önce, bu sistemlerin bazı dezavantajlarını göz önünde bulundurmalısınız. Bu makaleyi okurken, bir sayfa oluşturma kurallarının çok katı olduğunu fark etmeden edemediniz. Her şeyin kendi sabit boyutu vardır. Bir bloğun genişliğini değiştirdiğinizde, diğerlerini de değiştirmeniz gerekir. Her durumda, bir şeyi feda etmeniz gerekir. Örneğin 1000 piksellik bir tasarımınız olsa ve 960 Grid maksimum 960 piksel genişlik oluşturmanıza izin verse ne yapardınız... 1000 piksel istiyorsunuz! Kodda büyük bir değişiklik olmadan bunu uygulamak imkansız. Örneğin, bir müşteri daha geniş bir site istiyor veya bir tasarımcı uygulamanızla aynı fikirde değil. Hoparlör yükseklikleriyle ilgili başka bir sorun daha var. Üç sütun aynı arka plan rengine sahipse (altbilgide olduğu gibi), bu sütunların aynı yükseklikte olması gerekir. Bir başka önemli dezavantaj: ek girintilerin kullanılması ve çerçevelerin oluşturulması, tüm yerleşimin tahrip olmasına yol açar. Gerekli olanı eklemek ve hiçbir şeyi yok etmemek için, eklenen boyutları telafi etmeniz gerekir. Şimdi size nasıl olduğunu göstereceğim. Üst kısmı bitirmeye başlayalım.

4. Üst kısım

İlk olarak kolon yüksekliği ile ilgili problemi çözelim - düzeltelim. Ardından, bir ve diğer blokta boş div'ler oluşturalım. Bir resim veya metin bilgisi içereceklerdir. İç marjları belirlemeyeceğiz çünkü ızgara genişliğinin oranını kırabilirsiniz. Metnin güzel görünmesi için p etiketlerine biraz dolgu ekleyelim.

Bu durumda, bir kimlik değil, stil için bir sınıf oluşturmak daha iyidir, çünkü birden fazla bloğa uygulamamız gerekiyor. Gerekirse, bu da yüksekliği 2 adımda değiştirmemize izin verecektir. Sınıflarımız şöyle görünür:

Div.topSection div (kenarlık: düz 10 piksel # e5e5e6; yükseklik: 280 piksel;) div.topSection div p (kenar boşluğu: 10 piksel;)

Güzel! Bakalım elimizde ne var:

Doldurmaya hazır mısınız? Ardından sol bloğa bir miktar metin bırakın, ancak yüksekliği aşmamak için aşırıya kaçmayın. Aslında gerçek projelerde tasarımcı tüm bunları (blok boyutunun karşılayacağı karakter sayısı) hesaplamalıdır; Resmi sağ bloğa yerleştirmeden önce, henüz yapmadıysanız, boyutuna karar vermeniz gerekir. Bu, tasarım sürecinin başlarında veya FireBug aracılığıyla yapılabilir. İncele'yi tıklayın. İhtiyacımız olan div'e tıklayın. Düzen sekmesini seçin. Bundan sonra, ihtiyacınız olan tüm bilgileri göreceksiniz. Aşağıdaki resim size yardımcı olacaktır:

Ekran görüntüsünde posterin boyutları 360x280'dir. Bir resim bulun ve ona stil verin:

Img # afiş (genişlik: 360 piksel; yükseklik: 280 piksel;)

Bu kadar! Şablon hazır. Şimdi geriye kalan tek şey onu gerçek içerikle doldurmak ve çevrimiçi duruma getirmek:

5. Seçeneklerinizi bilin

Artık her şey hazır olduğuna göre özetleyelim. 960 Grid, bir şablonu 15 dakikada perçinlememize izin verdi. Güzel? Evet! IE6, IE7'de test ettik mi? Numara! Zorunlu? Numara. Bu sadece başlangıç! Peki şimdi ne var? Şimdi müşteriye göstermeniz ve tepkiye bakmanız gerekiyor. Ona uygunsa, test etmeye başlayabilirsiniz, ancak değilse ve müşteri daha karmaşık bir şey istiyorsa, her şeyi sıfırdan kendiniz yazmanız gerekir. Tekrar edeceğim. CSS çerçeveleri tüm sorunları çözmez. Buna rağmen, binlerce geliştirici bunları ortak bir web geliştirme aracı olarak kullanıyor çünkü herhangi bir araç gibi CSS çerçevelerinin de yaygın kullanım için kendi alanları var. Her durumda, tasarım istekleri çok özel değilse (zamanın %80'i), 960 Grid'i kullanmak size çok zaman kazandırabilir - ve vakit nakittir!

Bir zamanlar, bir web sitesi oluşturmak için bir yapay zeka olan alışılmadık bir hizmet hakkında yazmıştım. Mevcut sonuçlara bakıldığında, özellikle belirtilen fiyat göz önüne alındığında, "şöyle" oldukları ortaya çıktı. bu konuda daha etkili olacaklardır.

Bugün adı benzer, ancak özünde tamamen farklı bir "teknoloji" - CSS Grid'den bahsetmek istiyorum! Gönderi birkaç bölümden oluşur:

Düzen oluşturmaya yönelik bu yaklaşım, CSS kullanarak yeterince esnek site ızgaraları oluşturmayı kolaylaştırır. Gelecekte, büyük olasılıkla her yerde kullanılacaktır. Doğru anladıysam, Flexbox ile aynı görevler için mükemmel, ancak bunun aksine, aynı anda iki boyutlu boyutlarda (sütunlar ve satırlar) çalışabilir. Aşağıda konuya bir nevi giriş niteliğinde olan ve basit bilgilendirici örnekler içeren makalenin çevirisini sunuyorum. Dikkat! Notun yazarı, Aralık ayında CSS Izgarası üzerine ücretsiz (!) bir Kurs düzenliyor, isterseniz E-posta adresine bir istek gönderin.

Ayrıca internette konuyla ilgili yararlı bir video buldum. Belki birisinin aşağıdaki gibi bilgileri algılaması daha kolaydır:

CSS Izgarasına Giriş

Bu yıl bu teknoloji Chrome, FF, Safari'de yerleşik destek aldı, bu nedenle yakın gelecekte popüler bir araç haline gelmesi muhtemel. Ancak şimdilik, eski ve gecikmeli web tarayıcılarına dikkat etmeyi unutmayın.

En basit ağ

Burada 2 ana nesne vardır:

• ebeveyn / sarmalayıcı (onu oluşturan tüm iç blokları sarma);
• çocuklar / öğeler (öğelerin kendileri).

İşte en basit yapı:

Sarıcı (ekran: ızgara;)

Ancak, görüntü formatı tanımlanmadığı için bundan hemen sonra hiçbir şey değişmez. Birbirini takip eden 6 DIV göreceksiniz.

Sütunlar ve satırlar

Izgaranızı iki boyutlu yapmak için satır ve sütunların parametrelerini belirtmeniz gerekir - seçenekleri kullanın ızgara şablonu satırı ve ızgara-şablon-sütun sırasıyla:

Sarıcı (görüntüleme: ızgara; ızgara şablonu sütunları: 100 piksel 100 piksel 100 piksel; ızgara şablonu satırları: 50 piksel 50 piksel;)

Sütunlar için üç değer olduğundan, aynı sayı üretilecektir, bu nedenle sadece 2 satır vardır.Piksellerdeki sayılar, ilk durumda öğelerin genişliğini (her biri 100 piksel), ikinci durumda - yükseklik (50 piksel).

Nasıl çalıştığını daha iyi anlamanıza yardımcı olacak başka bir örnek:

Sarıcı (görüntüleme: ızgara; ızgara şablonu sütunları: 200 piksel 50 piksel 100 piksel; ızgara şablonu satırları: 100 piksel 30 piksel;)

Aşağıdaki resim görüntülenecektir:

Konum ve boyutlar

Bu özellikle, gerçekten çok güçlü site ızgaraları elde edersiniz. Diyelim ki 3x3 boyutumuz var:

Sarıcı (görüntüleme: ızgara; ızgara şablonu sütunları: 100 piksel 100 piksel 100 piksel; ızgara şablonu satırları: 100 piksel 100 piksel 100 piksel;)

HTML kodunda, örneğimizde olduğu gibi, 6 DIV öğesi varsa (en başta bakın), bu durumda sitede sadece 2 satır görüntülenecek, üçüncüsü geçici olarak doldurulmayacaktır. Ancak, blokların konumu ve boyutları için farklı parametreler uygulamaya başladığımızda - ızgara sütunu ızgara sırası, durum değişecek.

Stilleri nesnelerden birine ayarladık:

Öğe1 (ızgara-sütun-başlangıç: 1; ızgara-sütun-bitiş: 4;)

Bu, item1 sınıfına sahip bir DIV'nin ızgaradaki sütunun ilk satırında başladığı ve 4. satırda bittiği, yani tüm satırı doldurduğu anlamına gelir.

Aslında, şimdi bazı nesneler daha önce kaydettiğimiz (3x3) son satıra taşındı. Daha basit bir seçenek var:

Öğe1 (ızgara sütunu: 1/4;)

Öğe1 (ızgara-sütun-başlangıç: 1; ızgara-sütun-son: 3;) .item3 (ızgara-satır-başlangıç: 2; ızgara-satır-son: 4;) .item4 (ızgara-sütun-başlangıç: 2; ızgara-sütun-ucu: 4;)

Bize şu resmi veriyor:

Anlamayı başardın mı? Prensip olarak, zor değil, ancak bunun CSS Izgarasının nüanslarının yalnızca temel kısmı olduğunu anlamalısınız.

CSS Izgarası ile Prototipleme ve Yerleşim Alanları

İşaretleme kodu aşağıdaki gibidir (HTML):

Kapsayıcı (ekran: ızgara; ızgara şablonu sütunları: tekrar (12, 1fr); ızgara şablonu satırları: 50 piksel 350 piksel 50 piksel; ızgara aralığı: 5 piksel;)

Prensip olarak, her şey çizgilerle açıksa, sütunlarla netleştirmek gerekir. burada anlam olarak ızgara şablonu sütunları 12 özdeş sütundan (her birinin genişliği = toplamın 1/12'si) + aralarında 5 piksel boşluktan (ızgara aralığı) oluşan bir ızgara oluşturulur.

Izgara şablonu alanları ekle

Bu seçenek size daha da fazla esneklik ve harika özellikler sunar. Muhtemelen parametrenin sözdizimi ve biçimlendirmesi ızgara şablon alanları biraz sıradışı görünüyor, ama sonra her şeyin neden böyle olduğunu anlayacaksınız:

Kapsayıcı (ekran: ızgara; ızgara aralığı: 5 piksel; ızgara şablonu sütunları: tekrar (12, 1fr); ızgara şablonu satırları: 50 piksel 350 piksel 50 piksel; ızgara şablonu alanları: "hhhhhhhhhhhhhhh" "mmcccccccccccc" "fffffffffffff" ;)

Sitenizin ızgarasının CSS'de bir tür görsel temsilidir. Bu parametredeki tüm karakterler, yukarıdaki satırda tanımlandığı gibi 3 satır ve 12 sütun oluşturur. Her harf bir hücreden sorumludur. Örnekteki adlar HTML kodunun bloklarına karşılık gelir: başlık (h), menü (m), içerik (c) ve alt bilgi (f), ancak başka varyasyonları da kullanabilirsiniz.

Şablonlara ve Deneylere Alan Atama

Sonraki adımda, kapsayıcı sembollerini ve DIV öğelerini "mantıksal olarak bağlarsınız":

Başlık (ızgara alanı: h;) .menu (ızgara alanı: m;) .content (ızgara alanı: c;) .footer (ızgara alanı: f;)

Site, formun bir düzenini gösterecektir:

Ve şimdi sihir başlıyor. Parametredeki bazı harfleri değiştirelim ızgara şablon alanları, örneğin yerlerde "c" ve "m":

ızgara şablonu alanları: "h h h h h h h h h h h h" "c c c c c c c c c c m m" "f f f f f f f f f f f f f";

Izgara farklı görünecek:

Bu tasarıma duyarlılık eklemek genel olarak harika görünüyor. Bunu yalnızca HTML ile yapmazsınız, ancak CSS'de her şey mümkündür: ". H h h h h h h h h h." "cc c c c c c c c m m" ". f f f f f f f f f f f." ;

ızgara şablonu alanları: ". h h h h h h h h h h." "cc cc cc cc cc m m" ". f f f f f f f f f f f.";

Site şuna benziyor:

Komut dosyası veya HTML yok - sadece CSS Izgara büyüsü!

Daha Fazla Izgara ve Esnek Örnek

Daha sonra CSS Tricks'te konuyla ilgili başka bir makale buldum, bunun bazı varyasyonları sizin için yararlı olabilir. Örnek çalışmayı büyük ekranda görmek için (sağ üstteki kod bloğundaki logo) bağlantılarını izleyin.

Klasik web sitesi düzeni

Arasında iki kenar çubuğu bulunan bir içerik bloğu bulunan tam genişlikte bir üstbilgi ve altbilgimiz var. İlk durumda, ekran küçültüldüğünde, tüm nesneler eskisi gibi aynı konumlarda kalacaktır.

Blokların birbirinin altına yerleştirilmesini istiyorsanız, o zaman:

2 sütunlu blog ızgarası

Diyelim ki ortada büyük bir içerik bloğumuz ve bir kenar çubuğumuz var. Aşağıdaki kod, sayfa boyutunu küçültürken tüm nesneleri yerinde tutar.

İkinci teknik, onlara konumlarını birbiri ardına vermektir.

Elemanların genişlik dağılımı

Görsel olarak, tüm resimler birkaç sütunda yan yana geldiğinde örnek bir galeriye benziyor. Boyutu küçülttükçe, her satırda daha az ve daha az görünür.

Makale içindeki resim

Burada içerik, aralarında tam ekran bir blok olacak şekilde 2 bölüme ayrılmıştır.

Toplam. Genel olarak, dürüst olmak gerekirse, hoş bir şekilde etkilenen CSS Izgarası kavramını keşfettim - özellikle farklı harflerle yerleşim alanlarının dikkate alındığı çerçeveler. Tabii ki, bunların hepsi "teknolojinin" temelleri, ayrıca kodun her parametresini ayrıntılı olarak açıklamadım. Makalenin son bölümünde örnekler daha karmaşıktır ve dikkatle gözden geçirilmelidir. Hem Flex hem de Grid'i birleştirir. Bu konu ilginçse, ilk yazarın kurslarına abone olun - Orijinal birinci veya ikinci nottaki e-posta girişleri.

CSS Izgarasına ekleyeceğiniz bir şey var mı? - düşüncelerinizi yazın, tavsiyelerde bulunun veya ilginç bağlantılar gönderin.

Bu makale, bu nispeten yeni teknolojinin nasıl çalıştığını, çalıştığını ve yalnızca yüzey örnekleriyle özelliklerin bir açıklamasını değil.

Makalenin kendisi, CSS Grid Tutorial'ın duyarlı, artırılmış bir çevirisidir.

CSS Izgara Modülü, CSS'de şablon oluşturmanın en iyi yolunu sağlamak için CSS Çalışma Grubu tarafından geliştirilmiştir. Şubat 2017'de Aday Önerisinde yer aldı ve büyük tarayıcılar Mart 2017'de onu desteklemeye başladı.

CSS Grid yakında herhangi bir ön uç geliştiricinin araç kutusunun önemli bir parçası haline gelecek. Ve onlardan biriyseniz, o zaman CSS Grid'i öğrenmelisiniz - bu, ön uç geliştirmedeki herhangi bir pozisyon için neredeyse kesinlikle yadsınamaz bir beceri haline gelecektir.

Bu güçlü işlevsellik ve sezgisel sözdizimi ile ızgara şablonları şüphesiz web'in oluşturulma şeklini değiştirecektir.

Tanıtım

CSS Grid, 2B şablonlar için optimize edilmiş yeni bir şablon modelidir. Web sitesi şablonları, formlar, galeriler ve hassas ve duyarlı konumlandırma gerektiren diğer her şey için mükemmel bir modeldir.

Web'in son yıllarda gelişmesiyle birlikte web sitesi şablonları tasarlamak giderek daha zor hale geldi. Web'in ilk günlerinde, HTML tabloları genellikle çok sütunlu şablonlar, formlar ve daha fazlası için kullanılıyordu. Ancak bu yöntemin dezavantajları vardır. Bu, sunumun işaretleme düzeyinde yapılması gerektiği anlamına gelir, bu nedenle sunum ve içerik arasında bir ayrım yoktur. Aslında tablolar, şablonlar oluşturmak için değil, tablo verileri içerecek şekilde oluşturulmuştur. Anlamsal sorunlar bir yana, tablo şablonları duyarlı tasarım için yapılmaz.

Floatlar, biçimlendirmeden bağımsız olarak öğeleri konumlandırmamıza izin verdikleri için, genel olarak kabul edilen ve önerilen şablon oluşturma yöntemi olarak sonunda tablo şablonlarının yerini aldı. Ancak, bu yöntemin masa düzeni üzerinde önemli bir gelişme olduğu düşünülürken, aynı zamanda sınırlamaları da vardı. Şamandıralar öncelikle belge şablonları için tasarlandı ve artık web'de yaygın olan karmaşık uygulama şablonları için uygun değildi. Özellikle farklı boyutlardaki cihazlarda ve görünüm pencerelerinde kayan öğelerin kontrol edilmesi zordur. Bu, çoğu içerik paylaşımı kavramından uzaklaşan ek işaretleme gerektiren, norm haline gelen çeşitli ızgara benzeri hack'lere yol açtı. Bu yüzden CSS Çalışma Grubu daha iyi bir çözüm arıyordu.

CSS Izgara Modeli bu sorunları ve daha fazlasını ele alır. Filolarla geçireceğiniz zamandan çok daha kısa sürede ve daha az kodlamayla gelişmiş şablonlar oluşturmanıza olanak tanır.

Ama tabi bunun için 100px, 7em, %30 gibi farklı değerler kullanılabilir. Ayrıca, boyutlarıyla birlikte dizelere adlar da atayabilirsiniz.

ızgara şablonu sütunları: 1fr 1fr 1fr

Yukarıdakiyle aynı, yalnızca ızgaralardaki sütunları tanımlar.

Bir mola ortaya çıkarır. Yani, ızgara öğeleri arasındaki boşluklar. Burada, görünümün genişliğine göre vw uzunluk birimini kullanıyoruz, ancak 10px, 1em, vb. de kullanabiliriz. Grid-gap özelliği, grid-row-gap ve grid-column-gap için kısayoldur özellikler.

Kodun diğer kısmı, ızgara öğelerine farklı stiller atar.

#ızgara>

Tekrarla () işlevi

Öğe boyutu değeri bildirimlerini tekrarlamak için tekrar () işlevini kullanabilirsiniz. Örneğin, bunu yapmak yerine:

Izgara şablonu satırları: 1fr 1fr 1fr 1fr 1fr;

Bunu yapabiliriz:

Izgara şablonu satırları: tekrarlayın (5, 1fr);

Bu, özellikle büyük ve tekrarlayan ızgaralarla çalışıyorsanız, yazmanız gereken kod miktarını önemli ölçüde azaltacaktır.

CSS Izgarası ile Web Sitesi Şablonu Nasıl Oluşturulur

Izgaralar, koddaki şablonu sanal olarak "görebileceğiniz", şablonunuzu oluşturmayı ve değiştirmeyi çok kolaylaştıran sezgisel bir "ASCII grafik" sözdizimi içerir. Büyük değişiklikler bile birkaç saniye içinde yapılabilir. Bu sezgisel sözdizimi, duyarlı web tasarımına da yardımcı olur. Izgaraları kullanırken farklı cihazlar için farklı şablonlar oluşturmak oldukça önemsiz hale gelir.

Şimdi şuna benzeyen bir web sitesi şablonu oluşturalım:

Ve işte bu şablonun kodu:

Şimdi kodumuza daha yakından bakalım. HTML işaretlemesi şöyle görünür:

Ve böylece yapacağız bir ızgara kapsayıcı, böylece diğer tüm öğeler ızgara öğeleri haline gelir.

Şimdi biraz önce bahsettiğimiz ASCII grafiklerine bir göz atalım.

Izgara-şablon alanları: "üstbilgi üstbilgi üstbilgisi" "gezinme makalesi reklamları" "altbilgi altbilgi altbilgisi";

Bu parça şablonumuzu tanımlar. Sadece koda bakarak bunun 3x3'lük bir ızgara olduğunu görebiliriz (üç satır ve üç sütun). Bazı ızgara alanları birden fazla hücreye yayıldığından, bu bize dokuz ızgara hücresinde beş ızgara alanı verir.

Ayrıca, başlığın üç hücrenin ilk sırasının tamamını kapladığını ve bodrumun da tüm alt sırayı kapladığını ve ayrıca üç hücre aldığını görüyoruz. Gezinme, içerik ve reklam bölümleri hep birlikte, bu öğelerin her birinin bir hücre aldığı ikinci sıradaki alanı paylaşır.

Artık bu ızgara alanlarının her birini her bir öğeye atayabiliriz:

#pageHeader (ızgara alanı: başlık;) #pageFooter (ızgara alanı: altbilgi;) #mainArticle (ızgara alanı: makale;) #mainNav (ızgara alanı: nav;) #siteAds (ızgara alanı: reklamlar;)

Izgara alanı özelliği, ızgara öğelerini bir ızgaraya yerleştirmenize izin veren bir özelliğin kısaltmasıdır. Bizim durumumuzda, sadece grid-template-alanlarında daha önce belirttiğimiz isimlere atıfta bulunuyoruz.

Şablonun çoğu zaten tamamlandı. Kodun geri kalanı, daha genel olarak dekoratif alan olmak üzere boyutlara, boşluklara ve yüksekliklere atıfta bulunacaktır.

Aşağıdaki kod, satırlar ve sütunlar için boyutlar verir:

Izgara şablonu satırları: 60px 1fr 60px; ızgara şablonu sütunları: 20% 1fr 15%;

Birinci ve üçüncü satırların her ikisi de 60 piksel yüksekliğindedir ve ikinci satır kalan alanı kaplar.

İlk sütun %20 ve üçüncü sütun %15'tir. İkincisi kalan tüm alanı kaplar.

Şablonu değiştirme

Izgara şablon alanlarındaki ızgara alanlarını yeniden düzenleyerek şablonu değiştirebilirsiniz.

Buna göre değiştirirsek:

Kılavuz şablon alanları: "gezinme başlığı başlığı" "gezinme makalesi reklamları" "gezinme altbilgisi reklamları";

Ardından, sonuç olarak aşağıdaki şablonu elde ederiz:

Ancak, daha küçük bir ızgarayı daha büyük bir ızgaraya taşırsanız, boyutu ayarlamanız gerekebilir.

Örneğin, bunu yapmak için:

Gezinme artık içeriğin olduğu yeri alıyor, bu nedenle boyutlar ayarlandı. Yoksa içeriğimiz dar, navigasyonumuz geniş olurdu. Yani kod şimdi böyle görünüyor.

Izgara-şablon alanları: "başlık üstbilgisi başlığı" "makale gezinme reklamları" / * Ondan önce "gezinme makalesi reklamları" vardı * / "altbilgi altbilgisi altbilgisi"; ızgara şablonu satırları: 60px 1fr 60px; grid-template-columns: 1fr %20 %15; / * Ondan önce '%20 1fr %15' idi* /

Duyarlı bir ızgara oluşturma

Izgara şablonu, kapsayıcıya sığacak belirli bir boyutta birçok iz içeren bir ızgara oluşturmanıza olanak tanıyan otomatik doldurma ve otomatik sığdırma gibi değerlere sahiptir. Bu, ızgaranın duyarlı olduğu anlamına gelebilir, yani tarayıcı penceresini yeniden boyutlandırdıkça öğelerin konumlarını değiştirdiği anlamına gelir.

Otomatik Doldurma kullanımına bir örnek:

İşte sonuç:

Bundan sorumlu kod:

Izgara-şablon-sütunları: tekrarla (otomatik doldurma, minmax (150px, 1fr));

Sütunlara minimum 150 piksel ve kalan alan için maksimum boyut verir. Bu izler, konteynere sığması için gerektiği kadar tekrarlanacaktır.

Yinele () işlevi, bir parçanın tanımını ilk parametre tarafından belirtilen sayıda tekrarlar. Otomatik doldurmanın kullanılması, parçaların kapsayıcıyı doldurana kadar birçok kez tekrarlanmasını sağlar.

Bu parçaların boyutu ikinci parametrede belirtilir. Bizim durumumuzda minimum sütun boyutunun 150px ve maksimumun 1fr olduğunu belirtmek için minmax (150px, 1fr) kullanıyoruz.

Otomatik sığdır

otomatik sığdırma, otomatik doldurma ile hemen hemen aynı şekilde çalışır. Tek fark, otomatik sığdırma, yerleştirme sonunda tüm boş parçaları daraltırken, otomatik doldurma yapmaz. Buradaki en iyi yol, karşılaştırmalı bir demo.

Burada iki küçük ızgara elemanı kullanmak, tüm çalışma konseptini göstermeye yardımcı olacaktır. Otomatik doldurma, belirtilen boyutlarda uçta boş izler bırakır ve otomatik sığdırma boş yolu uzatır, bu da izleri, alanı doldurmak için uzatılmış öğelerle doldurmaya yol açar.

Medya sorguları içeren ızgaralar

Izgaraların güçlü yönlerinden biri, saniyeler içinde tamamen farklı bir şablon oluşturabilmenizdir.

Bu, ızgaraları medya sorguları için ideal hale getirir. ASCII grafiklerindeki değerleri basitçe yeniden atayabilir ve sonucu bir medya sorgusuna sarabiliriz.

Bu, büyük bir görünüm alanında üç sütunlu bir düzendir ve küçük cihazlarda tek sütunlu bir düzene küçülür. Bu nedenle, bu örnek ekran boyutuna bağlı olarak farklı görünecektir. Her neyse, geniş görüş alanları için 3 sütunlu model için ilgili kod burada.

Izgara-şablon alanları: "üstbilgi üstbilgi üstbilgisi" "gezinme makalesi reklamları" "altbilgi altbilgi altbilgisi";

Ve işte mobil sürüm için ilgili kod:

Izgara şablon alanları: “başlık” “makale” “reklamlar” “gezinme” “alt bilgi”;

Yani her şey grid-template-areas özelliğindeki değerleri yeniden atamakla ilgili.

Bizim durumumuzda, mobil sürümü burada olduğu gibi bir medya sorgusuna sardık:

@media all ve (maks-width: 575px) (gövde (ızgara şablon alanları: "başlık" "makale" "reklamlar" "gezinme" "altbilgi"; ızgara şablonu satırları: 80px 1fr 70px 1fr 70px; ızgara- şablon sütunları: 1fr;))

Izgara-şablon-satırları ve ızgara-şablon-sütunlarındaki değerleri de yeni şablona uyacak şekilde ayarladığımızı unutmayın. Özellikle, yalnızca bir sütun olmalı ve tüm boş alanı kaplamalıdır. Ve tüm grid öğeleri bir yığında olacağından 5 sıra atayacağız ve yüksekliklerini belirleyeceğiz.

Izgarayı blokla birleştirmek

Şablonunuzun gereksinimlerine bağlı olarak, mobil sürümü display:block olarak değiştirmenizi engelleyen hiçbir şey yoktur. Buradaki gibi:

@media all ve (maksimum genişlik: 575 piksel) (gövde (ekran: blok;))

Bu, yukarıdaki örnekte olduğu gibi çalışacak, ancak varsayılan olarak öğeler orijinal sıralarında görünecektir. Yukarıdaki örnekte, mobil sürümün reklamlar altında bir gezinme özelliği vardır, ancak görüntüleme: engelleme özelliğini kullanacak olsaydık gezinme, reklamlardan daha yüksek olurdu.

Ayrıca bu yöntemi kullanarak, ızgara versiyonunda bulunan eksik boşlukları telafi etmek için fazladan dolgu eklemeniz gerekebilir.

Açık ve Kapalı Izgaralar

CSS Grid, açık ve örtük bir ızgara kavramını kullanır. Bu, ızgaralar oluştururken dikkat etmeniz gereken önemli bir kavramdır, aksi takdirde asla var olmasını beklemediğiniz bir sürü satır ve sütunla karşılaşırsınız.

Açık bir ızgara, ızgara şablonu satırlarında, ızgara şablonu sütunlarında ve ızgara şablonu alanlarında tanımladığınız ızgaradır.

Ancak yine de "açıkça" tanımlanmış ızgaranıza uymayan öğeleriniz olabilir. Örneğin, yalnızca altı öğeye sığabilecek bir ızgara tanımladınız, ancak kapsayıcının kendisi aslında dokuz öğedir. Açık ızgaraya yalnızca altı öğe sığacak ve üçü kalacak. Ve bu, örtük ızgaraların başladığı yerdir.

Izgara öğeleri açık ızgaranın dışına yerleştirildiğinde, örtülü ızgaralar ızgara kapsayıcısı tarafından otomatik olarak oluşturulur. Kap, ızgaraya örtük çizgiler ekleyerek örtük ızgara izleri oluşturur. Bu çizgiler, açık ızgaralarla birlikte, örtük olanları oluşturur. İşte bir örnek:

Bu örnekte, dört ızgara öğesine sığdırmak için açıkça iki satır ve iki sütun tanımlıyoruz. Ancak, altı ızgara öğesi vardır, bu nedenle iki ek öğeyi barındırmak için örtük bir ızgara oluşturuldu.

Ve bu çok iyi, eğer örtülü ızgara oluşturulmasaydı, iki ekstra unsur ızgarada tam bir karmaşa yaratacaktı.

Örtülü ızgaralar için iz boyutunu ayarlama

Ekstra sıranın önceki ikisi kadar uzun olmadığını fark etmiş olabilirsiniz. Bunun nedeni, grid-template-rows özelliğinde satır yüksekliğini ayarlamış olmamızdır, ancak bu yalnızca açık ızgaralar için geçerlidir. Örtülü ızgaralardaki satır yüksekliği, grid-auto-rows özelliği kullanılarak ayarlanmalıdır. Ancak bunu yapmadığımız için, örtük satırın içeriğe dayalı otomatik izleme boyutunu kullandığı ortaya çıktı. İz boyutlandırma özellikleri şu şekilde bulunur:

Genel olarak, şöyle çıkıyor:

Açık ızgara, ızgara şablonu satırlarını ve ızgara şablonu sütunlarını kullanır

Örtülü ızgara, ızgara otomatik satırları ve ızgara otomatik sütunlarını kullanır

Bu durumda, yalnızca bir izi kapsadığı için ilk öğe üzerinde bitiş değerleri belirtmemize gerek yoktur. Aynı şey ikinci ızgara öğesi için de söylenebilir. Varsayılan olarak, bitiş çizgisini belirtmezseniz, öğe yalnızca bir parçayı kapsayacaktır.

Aslında, ilk ızgara elemanı için herhangi bir konumlandırma belirtmemize gerek yoktu, çünkü belirli bir konumda olduğu için zaten öyle olurdu. Ancak ikinci eleman için konumlandırma belirtmemiş olsaydık, o zaman sadece 1 iz kaplayarak ilk elemandan hemen sonra yer alırdı.

Kılavuz çizgilerini adlandırma

Daha kolay başvuru için ızgara çizgilerini de adlandırabilirsiniz. Bu, grid-template-rows ve grid-template-columns özelliklerini ayarlayarak yapılabilir, örneğin şu şekilde:

#grid (display: grid; / * İzleri ayarlayın ve çizgileri adlandırın * / grid-template-rows: 50px 1fr 80px; grid-template-columns: 120px 1fr 80px; grid-gap: 5px; height: 90vh;) . .. / * Şimdi * / # item2 isimli satırlara bakın : col3 -son;)

Adlandırılmış satırlar açık veya örtük olabilir. Izgara-şablon-alanlarını kullanarak adlandırılmış ızgara alanları oluşturduğunuzda, örtük adlandırılmış çizgiler oluşturulur.

Adı, satırın başı veya sonu olmasına bağlı olarak -start ve -end ekleri ile ızgara alanından alınır.

Bu, adlandırılmış her ızgara başlık alanı için dört örtülü satır oluşturacaktır. Adlandırılmış ızgara alanında iki tanesi başlık-başlangıç ​​ve sütun-başlangıç ​​olarak adlandırılır ve iki tanesi sırasıyla başlık-son olarak adlandırılır.

Adlandırılmış ızgara alanları

Izgara alanları, ızgara kabının kendisinin ızgara-şablon-alanları özelliğinde adlandırılabilir. Site şablonunu oluşturduğumuzda daha önce yaptığımız şey buydu. Belleğe geri yüklemek için şöyle görünür:

#grid (ekran: ızgara; / * Izgara alanını yeniden adlandırma * / ızgara şablonu alanları: “aa” “bc”;…)… / * Şimdi her ızgara öğesini adlandırılmış ızgara alanına uygulayın * / #a (ızgara- alan: a;) #b (ızgara alanı: b;) #c (ızgara alanı: c;)

Nokta (.) kullanarak boş bir hücre veya boşluk içermeyen bir dizi nokta belirtebilirsiniz. Örneğin:

Izgara şablonu alanları: “a a” “. B "; Veya ızgara şablonu alanları: “başlık başlığı” “… içerik”;

Izgara yerleştirme özellikleri

Yukarıdaki örneklerde bahsedilen ızgaraları yerleştirmek için uzun özellikler yerine kullanabileceğiniz üç kısa özellik vardır. İşte hepsinin uygun olduğu yer.

grid-area - Bu özellik şunun kısaltmasıdır:

grid-column - Bu özellik şunun kısaltmasıdır:

grid-column-start - ızgara öğesinin hangi sütun satırının başlangıç ​​satırı olduğunu ve kaç tane iz uzattığını gösterir.

grid-column-end - grid öğesinin hangi sütun satırlarında sona erdiğini ve kaç tane iz uzattığını gösterir.

grid-row - Bu özellik şunun kısaltmasıdır:

grid-row-start - grid öğesinin hangi satır çizgisiyle başladığını ve kaç tane iz uzattığını gösterir.

grid-row-end - eleman için hangi satır satırının son olacağını ve kaç tane iz uzatacağını gösterir.

Bundan önceki bölümde bahsedilen grid-auto-flow özelliğini de kullanabilirsiniz. Otomatik olarak düzenlenen ızgara öğelerinin ızgaraya nasıl sığması gerektiğini belirtir. Otomatik yerleştirilen öğeler, yukarıdaki özelliklerden herhangi biri kullanılarak açıkça yerleştirilmeyen öğelerdir.

Yuvalanmış bir ızgara oluşturun

Izgara elemanları, CSS Izgarasında kendileri ızgaralar haline gelebilir. Yani, bir ızgara öğesini başka bir ızgara öğesinin içine yerleştirebilir, böylece iç içe bir ızgara oluşturabilirsiniz.

Böyle bir iç içe ızgara oluşturmak için tek yapmanız gereken ızgara öğesine display: grid (veya display: inline-grid) uygulamaktır ve bu ızgara kendisi olacaktır. Bir alt ızgara oluşturmak için display: subgrid'i de kullanabilirsiniz. , Bu nasıl olur.

Miras

Çoğu ızgara özelliği miras alınmaz; bu, iç içe ızgaranızın üst ızgarasının değerlerini devralmayacağı anlamına gelir. Bu, iç içe ızgarayı yanlışlıkla etkilemeden üst ızgarada değişiklik yapmanızı sağlar.

Örneğin, grid-auto-flow: sütununu üst ızgarada gösterdiniz, ancak özelliği iç içe ızgarada göstermediniz. Bu durumda, bu özelliğin orijinal değeri bu olduğundan, iç içe ızgara satıra ayarlanacaktır.

Ana ızgarada, sayıların satır boyunca yatay olarak değil, sütunlarda dikey olarak aşağı indiğini, ancak iç içe ızgaranın satır boyunca yatay olarak gittiğini unutmayın.

alt ızgaralar

CSS Izgara modülü, görüntüleme özelliği için alt ızgara değerini ayarlar. Ancak, henüz tüm tarayıcılar bunu desteklememektedir. Bu değer oldukça kullanışlı olmalıdır.

Alt ızgara, iç içe geçmiş bir ızgaradır, ancak görüntüleme: alt ızgarası vardır. Bu, onu, ana ızgara kabının ızgarasının boyutlandırılmasına katılan özel bir ızgara kabı yapar. Başka bir deyişle, alt ızgaranın içeriği, içeriğin iki ızgara arasında düzenlenmesine izin vererek ana ızgaranın boyutunu etkiler. Aşağıda, bu özelliğin nerede yararlı olabileceğine dair bir örnek verilmiştir.

İşte öğelerin bir listesi:

• İsim:
• Adres:
• Telefon:

İşte listenin bir ızgara olduğu ve liste öğelerinin alt ızgaralar olduğu CSS.

Ul (ekran: ızgara; ızgara: otomatik akış / otomatik 1fr;) li (ekran: alt ızgara; ızgara sütunu: yayılma 2; kenar boşluğu: 0,5em; kenarlık: düz; dolgu: 0,5em;) etiket (ızgara-sütun: 1;) girdi (ızgara sütunu: 2;)

Bu örnek, her liste öğesinin çevresinde bir kenarlık ile bir satırda etiketi ve girişi gösterir. Listenin her bir öğesini bir alt ızgaraya maruz bırakmak, girdi formlarının hizalanmasıyla ilgili herhangi bir sorun olmaması gerektiği anlamına gelir, çünkü listenin her bir öğesi, ana ızgara boyutunun oluşumuna katılır.

Otomatik yerleşimli formlar

Açık ızgaraları, ızgara hizalaması gerektiren şekiller veya başka herhangi bir öğe kümesi oluştururken avantaj olarak kullanabilirsiniz. Örneğin, aşağıdaki gibi bir şekil oluşturmak için açık ızgaraları kullanabilirsiniz:

Ve biçimlendirmeye form öğeleri eklediğinizde, açık ızgara, bunlara uyacak satırlar ekleyecektir. Bu nedenle, üstteki şekli oluşturmak için bu işaretlemeye ihtiyacımız var.

Her şeyi doğru bir şekilde düzenlemek için ek işaretlemeye gerek yok. Ayrıca form öğeleri için ek sınıflar eklemeye gerek yoktur. için sadece bir sınıf ekliyoruz

Otomatik olarak yeni form öğeleri ekleyebilirsiniz ve bunlar, açık ızgaraya yerleştirilecekleri için diğerlerine otomatik olarak uyum sağlar.

Bu, formun kendisini bir ızgara yaptığımız için mümkündür (çünkü myForm display: grid ile birlikte uygulanır). Ardından etiketlerin bir sütuna, kontrollerin ise diğerine gittiğini belirttik.

İşte bu sefer daha da fazla öğe içeren başka bir örnek:

Alt ızgaralar tarayıcılar arasında yaygınlaştıkça, doğrudan torunları olmayan form öğelerini hizalamak mümkün olacaktır.