CSS Izgarası Seviye 2: Alt Izgara Geliyor

Artık tarayıcılarımızın çoğunda CSS Izgara Düzeni inişinden bir yıldan fazla bir süre geçti ve CSS Çalışma Grubu zaten spesifikasyonun 2. Seviyesi üzerinde çalışıyor. Bu makalede, şu anda bu spesifikasyonun Çalışma ve Editörün Taslağının bir parçası olan şeyi açıklayacağım. Buradaki her şeyin değişebileceğini ve bunların hiçbirinin şu anda tarayıcılarda çalışmadığını unutmayın. Bunu sürece bir göz atın, uygulamaların şekillendiğini görmeye başladığımızda daha pratik parçalar yazacağımdan eminim.

CSS Spesifikasyon Seviyeleri

Şu anda tarayıcılarda kullanabileceğimiz CSS Izgarası özellikleri, CSS Izgarası spesifikasyonunun 1. Düzeyindeki özelliklerdir. CSS'nin çeşitli bölümleri modüllere ayrılmıştır; bu modülerleştirme CSS, CSS 2.1'den geçtiğinde gerçekleşti, bu yüzden bazen insanların CSS3 hakkında konuştuğunu duyarsınız. Gerçekte, CSS3 yoktur. Bunun yerine, zaten CSS2.1 spesifikasyonunun parçası olan her şeyi içeren bir dizi modül vardı. CSS2.1'de bulunan herhangi bir CSS, Düzey 3 modülünün bir parçası haline geldi, bu nedenle, seçiciler CSS2.1'de mevcut olduğundan, CSS Seçici Düzey 3'e sahibiz.

CSS Grid Layout gibi CSS2.1'in parçası olmayan yeni CSS özellikleri Seviye 1'de başlar. CSS Grid Level 1 spesifikasyonu esasen Grid'in ilk versiyonudur. Bir belirtim Düzeyi Aday Öneri durumuna geldiğinde, önemli yeni özellikler eklenmez. Bu, tarayıcıların ve diğer kullanıcı aracılarının spesifikasyonu uygulayabileceği ve bunun bir W3C Önerisi olabileceği anlamına gelir. Yeni özellikler tasarlanacaksa, bunlar şartnamenin yeni bir Düzeyinde gerçekleşecektir. CSS Grid Layout ile bu noktadayız. Seviye 1 spesifikasyonu CR'dedir ve üzerinde çalışılacak yeni özellikler için Seviye 2 spesifikasyonu oluşturulmuştur. Spesifikasyon tartışmalarını takip etmek istiyorsanız Editörün Taslağı'na bakmanızı öneririm, çünkü bu en son düzenlemeleri içerecektir.

CSS Izgarasının 2. Seviyesi Neleri İçerir?

Sonuç olarak, seviye 2 spesifikasyonu, Seviye 1'de bulunan her şeyi ve bazı yeni özellikleri içerecektir. Yazma sırasında spesifikasyona bakarsanız, Seviye 2 CR'ye ulaştığında Seviye 1'in tamamının kopyalanması gerektiğini açıklayan bir not vardır.

Daha sonra bazı yeni özellikler bulmayı bekleyebiliriz ve Izgara Spesifikasyonunun 2. Seviyesi tamamen CSS Grid'in alt ızgara özelliği üzerinde çalışmakla ilgilidir. Bu özellik, alt ızgara için kullanım durumlarını doğru bir şekilde anlamak için zaman tanımak ve Düzey 1'in geri kalanını ertelemeden üzerinde çalışmak için daha fazla zaman vermek için Düzey 1 belirtiminden çıkarılmıştır. Bu makalenin geri kalanında, Şu anda Editörün Taslağı'nda ayrıntılı olarak açıklandığı için alt ızgara özelliğine bir göz atın. Özellik konusunda çok erken bir aşamadayız, ancak bu, takip etmek ve spesifikasyonun nasıl geliştirildiğini şekillendirmeye gerçekten yardımcı olmak için mükemmel bir zaman. Bu makaleyi yazmaktaki amacım, anlayabilmeniz ve tartışmalara girdilerinizi getirebilmeniz için tartışılan bazı şeyleri açıklamaktır.

Alt Şebeke Nedir?

CSS Izgara Düzenini kullanırken, ızgaraları zaten iç içe yerleştirebilirsiniz. Aşağıdaki örnekte, altı sütunlu iz ve üç sıralı iz içeren bir üst ızgaram var. Bu ızgarada 2. sütundan 6. satıra ve 1. satırdan 3. satıra kadar bir öğe konumlandırdım. Daha sonra bu öğeyi bir ızgara kapsayıcı yaptım ve sütun izlerini tanımladım.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: 2fr 1fr 2fr 1fr; }

Yuvalanmış ızgaramızın izlerinin, üst öğedeki izlerle hiçbir ilişkisi yoktur. Bu, iç içe ızgaramızın izlerini dış ızgaradaki çizgilerle hizalamak istiyorsak, işi yapmamız ve tüm izlerin eşit kalmasını sağlayan iz boyutlarını hesaplama yöntemlerini kullanmamız gerektiği anlamına gelir. Yukarıdaki örnekte, ızgaranın bir hücresine daha büyük boyutlu bir öğe eklenene kadar (daha fazla alan kullanmasını sağlayarak) izler sıralı görünecektir.

Sütunlar için, esasen ızgara esnekliğini kısıtlayarak yukarıdaki senaryoyu aşmak genellikle mümkündür. Alan dağılımı yaparken öğe boyutunu yok saymaları için fr birim sütunlarınızı minmax(0,1fr) yapabilir veya yüzdeleri kullanmaya geri dönebilirsiniz. Ancak bu, ızgara kullanmanın bazı faydalarını ortadan kaldırır ve sıraları iç içe bir ızgarada sıraya koymak söz konusu olduğunda bu yöntemler işe yaramaz.

Diyelim ki kartların ayrı ayrı üstbilgi, gövde ve altbilgiye sahip olduğu bir kart düzeni istiyoruz. Ayrıca üstbilgi ve altbilginin kartlar arasında hizalanmasını istiyoruz.

 .cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } .card { display: grid; grid-template-rows: auto 1fr auto; }

Bu, içerik her üstbilgi ve altbilgide aynı yükseklikte olduğu sürece çalışır. Fazladan içeriğimiz varsa, yanılsama bozulur ve üstbilgiler ve altbilgiler artık satır boyunca hizalanmaz.

Bir Alt Izgara Oluşturma

Şimdi alt ızgara özelliğinin şu anda nasıl belirtildiğine ve yukarıda gösterdiğim sorunları nasıl çözebileceğine bir göz atabiliriz.

Not : Yazma sırasında aşağıdaki kodların hiçbiri tarayıcılarda çalışmıyor. Buradaki amaç sözdizimi ve kavramları açıklamaktır. Nihai spesifikasyonun da bu ayrıntılardan değişmesi muhtemeldir. Başvuru için, bu makaleyi 23 Haziran 2018'de mevcut olan Editörün Taslağı'na dayanarak yazdım.

Bir alt ızgara oluşturmak için grid-template-rows ve grid-template-columns için yeni bir değere sahip olacağız. Bu özellikler normalde satır ve sütun izlerinin sayısını ve boyutunu tanımlayan bir iz listesiyle birlikte kullanılır. Ancak bir alt ızgara oluştururken bu izleri belirtmek istemezsiniz. Bunun yerine, ızgaraya bu iç içe ızgaranın kapsadığı ızgara alanının kapsadığı iz sayısını ve iz boyutunu kullanması gerektiğini söylemek için subgrid değerini kullanırsınız.

Aşağıdaki kodda, 6 sütunlu iz ve 3 sıra izli bir üst ızgaram var. İç içe ızgara, bu üst ızgaradaki bir ızgara öğesidir ve 2. sütundan 6. sütuna ve 1. satırdan 4. satıra kadar uzanır. alt ızgara. İç içe ızgara, hem grid-template-columns hem de grid-template grid-template-rows subgrid için bir alt ızgara değerine sahiptir. Bu, yuvalanmış ızgaranın artık üst öğede tanımlanan izlerle aynı boyutlandırmayı kullanan 4 sütunlu izlere ve 2 sıralı izlere sahip olduğu anlamına gelir.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }

Bu, üst öğedeki iz boyutunda yapılacak herhangi bir değişikliğin iç içe ızgara tarafından takip edileceği anlamına gelir. Ana ızgaradaki izlerden birini daha geniş yapan daha uzun bir kelime, iç içe ızgaradaki o yolun da genişlemesine neden olur, bu nedenle işler aynı hizada olmaya devam eder. Bu aynı zamanda diğer şekilde de işe yarar: ana ızgaranın izleri, alt ızgaradaki içeriğe bağlı olarak daha geniş olabilir.

Tek Boyutlu Alt Izgaralar

Bir boyutta bir alt ızgaraya sahip olabilir ve başka bir boyutta iz boyutunu belirleyebilirsiniz. Bu sonraki örnekte, alt ızgara yalnızca grid-template-columns üzerinde belirtilmiştir. grid-template-rows özelliği, belirtilen bir parça listesine sahiptir. Bu nedenle sütun izleri yukarıda gördüğümüz dört iz olarak kalacaktır, ancak satır izleri ebeveynin izlerine ayrı olarak tanımlanabilir.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: 10em 5em 200px 200px; }

Bu, tıpkı günümüzde iç içe bir ızgara oluştururken olduğu gibi, alt ızgara satırlarının üst ızgara içinde yuvalanacağı anlamına gelir. Yuvalanmış ızgaramız ebeveynin iki satırını kapsadığından, taşmalara neden olmamak için bu satırlardan birinin veya her ikisinin alt ızgara içeriğini içerecek şekilde genişletilmesi gerekecektir.

Ayrıca bir boyutta bir alt ızgaranız olabilir ve diğer boyutta örtük izler kullanabilirsiniz. Aşağıdaki örnekte herhangi bir satır izi belirtmedim ve grid-auto-rows için bir değer verdim. Satırlar, örtülü ızgarada belirttiğim boyutta oluşturulacak ve önceki örnekte olduğu gibi, ebeveynin bu satırlar için alana sahip olması veya bunları içerecek şekilde genişletmesi gerekecek.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-auto-rows: minmax(200px, auto); }

Hat Numaralandırma ve Alt Şebeke

İlk örneğimize tekrar bakacak olursak, alt ızgaramızın iz boyutu her iki boyutta da ebeveyn tarafından belirlenir. Ancak satır numaraları alt ızgarada normal şekilde hareket eder. Satır içi yöndeki ilk sütun satırı 1. satırdır ve satır içi yönün uzak ucundaki satır -1 satırıdır. Üst öğenin satır numarasıyla alt ızgaranın satırlarına atıfta bulunmazsınız.

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; } .subitem { grid-column: 2 / 4; grid-row: 2; }

Boşluklar ve Alt Izgaralar

Alt ızgara, ana ızgarada ayarlanan herhangi bir sütun veya satır boşluğunu devralır, ancak bu, alt ızgarada belirtilen sütun ve satır boşlukları tarafından geçersiz kılınabilir. Örneğin, ana ızgarada 20 piksele ayarlanmış bir column-gap varsa, ancak alt ızgarada column-gap 0'a ayarlanmışsa, boşluğu 0'a düşürmek için alt ızgaranın ızgara hücreleri her iki tarafta 10 piksel kazanır. ızgara çizgisi esasen boşluğun ortasından geçiyor.

Artık alt ızgaranın, bu makalenin başlangıcından itibaren ikinci kullanım durumunu çözmemize nasıl yardımcı olacağını görebiliriz, kartlar arasında üstbilgi ve altbilgi içeren kartlara sahip olmak.

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: auto 1fr auto; grid-gap: 20px; } .card { grid-row: auto / span 3; /* use three rows of the parent grid */ display: grid; grid-template-rows: subgrid; grid-gap: 0; /* set the gap to 0 on the subgrid so our cards don't have gaps */ }

Hat Adları ve Alt Şebeke

Ana ızgaranızdaki tüm satır adları alt ızgaraya iletilecektir. Bu nedenle, ana tablomuzdaki satırları adlandırırsak, öğeyi bu satır adlarına göre konumlandırabiliriz.

 .grid { display: grid; grid-template-columns: [a] 1fr [b] 2fr [c] 1fr [d] 2fr [e] 1fr [f] 2fr [g]; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: 10em 5em 200px 200px; } .subitem { grid-column: c / e; }

Alt ızgaranıza satır adları da ekleyebilirsiniz, ızgara satırları birden çok satır adına sahip olabilir, böylece bu adlar satırlara eklenir. Satır adlarını belirtmek için, grid-template-columns ve grid-template-rows alt ızgara değerinden sonra bu subgrid bir listesini ekleyin. Yukarıdaki örneğimizi alır ve alt ızgara satırlarına adlar eklersek, alt ızgaradaki herhangi bir satır için iki satır adı elde ederiz.

 .grid { display: grid; grid-template-columns: [a] 1fr [b] 2fr [c] 1fr [d] 2fr [e] 1fr [f] 2fr [g]; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid [sub-a] [sub-b] [sub-c] [sub-d] [sub-e]; grid-template-rows: 10em 5em 200px 200px; } .subitem { grid-column: c / e; }

Örtülü İzler ve Alt Izgara

Izgaranızın bir boyutunun bir alt ızgara olduğuna karar verdiğinizde, bu, o boyutta herhangi bir ek örtük izlere sahip olma yeteneğini ortadan kaldırır. Sığabilecek daha fazla öğe eklerseniz, ek öğeler, öğeler aşırı büyük ızgaralarda ele alındığı şekilde alt ızgaranın mevcut son izine yerleştirilecektir. Mevcut olandan daha fazla yola yayılan alt ızgarada oluşturulan bir Izgara Alanı, son satırı alt ızgaranın son satırına ayarlanacaktır.

Bununla birlikte, yukarıda açıklandığı gibi, alt ızgaranızın bir boyutunun, örtük izler de dahil olmak üzere, normal iç içe ızgara ile tam olarak aynı şekilde davranmasını sağlayabilirsiniz.

Sürece Dahil Olma

CSS Çalışma Grubu'nun çalışmaları, diğer açık kaynaklı projelerde olduğu gibi, GitHub'da halka açık olarak gerçekleşir. Bu, bir e-posta listesinde olan her şeyin olduğu işi takip etmeyi biraz daha kolaylaştırır. CSS Çalışma Grubu GitHub deposunda css-grid-2 olarak etiketlenen sorunları arayarak, CSS Izgarası belirtiminin 2. Düzeyinde ortaya çıkan sorunlara göz atabilirsiniz. Bu sorunlardan herhangi birine düşünceleriniz veya kullanım senaryonuzla katkıda bulunabilirseniz, memnuniyetle karşılanacaktır.

İnsanların CSS Izgara Düzeni için talep ettiği başka özellikler de vardır ve bunların Seviye 2'ye dahil edilmemiş olmaları dikkate alınmadıkları anlamına gelmez. Seviyeleri, bir üründe bir özellik sürümü olabileceği gibi görebilirsiniz, çünkü bazı özelliklerin mevcut sprintin parçası olmaması, bunun asla olmayacağı anlamına gelmez. Yeni web platformu özellikleri üzerinde çalışmak, ortalama ürün sürümünden biraz daha uzun sürme eğilimindedir, ancak bu benzer bir süreçtir.

Bütün bunlar ne kadar sürer?

Spesifikasyon geliştirme ve tarayıcı uygulaması biraz döngüsel, yinelemeli bir süreçtir. Bazı tarayıcı uygulamalarını görmeden önce spesifikasyonun "tamamlanması" gerekmiyor. İlk uygulamaların, tıpkı orijinal ızgara spesifikasyonunda olduğu gibi, özellik bayraklarının arkasında olması muhtemeldir. Bunların görünmesine dikkat edin, çünkü onunla oynamak için bir kod olduğunda, bu özellikler hakkında düşünmeyi çok daha kolay hale getirir!

Umarım yakında olacaklarla ilgili bu tur ilginç olmuştur. Her zaman web için tam bir ızgara düzeni sistemi için hayati önem taşıdığına inandığım için, alt ızgara özelliğinin devam ettiği için heyecanlıyım, özelliğin nasıl ilerlediği ve ortaya çıkan tarayıcı uygulamaları hakkında daha fazla haber için bu alanı izleyin.