CSS Izgarasının Örtülü Izgarasını ve Otomatik Yerleştirme Güçlerini Keşfetmek

CSS Grid ile çalışırken yapılacak ilk şey, display: grid ızgara kapsayıcı olmak istediğimiz öğe üzerinde. Ardından, ızgarayı aşağıdakilerin bir kombinasyonunu kullanarak açıkça tanımlarız: grid-template-columns, grid-template-rows, ve grid-template-areas. Ve oradan sonraki adım, öğeleri ızgaraya yerleştirmektir.

Bu, kullanılması gereken klasik yaklaşımdır ve ben de tavsiye ederim. Ancak, ızgaralar oluşturmak için başka bir yaklaşım daha var. açık bir tanım olmadan. biz buna örtük ızgara.

"Açık, örtülü? Burada neler oluyor?"

Garip terimler, değil mi? Manuel Matuzovic zaten vardır iyi bir açıklama CSS Grid'de "örtük" ve "açık" olarak ne yapabiliriz, ama hadi doğrudan ne olduğuna bakalım. the specification diyor ki:

The grid-template-rows, grid-template-columns, ve grid-template-areas özellikler, oluşan sabit sayıda iz tanımlar açık ızgara. Izgara öğeleri bu sınırların dışında konumlandırıldığında, ızgara kapsayıcısı, ızgaraya örtük ızgara çizgileri ekleyerek örtük ızgara izleri oluşturur. Bu çizgiler, açık ızgara formuyla birlikte örtük ızgara.

Bu nedenle, düz İngilizce'de, herhangi bir öğenin tanımlanan ızgara dışına yerleştirilmesi durumunda tarayıcı otomatik olarak ekstra satırlar ve sütunlar oluşturur.

Peki ya otomatik yerleştirme?

Örtük ızgara kavramına benzer şekilde, otomatik yerleştirme tarayıcının öğeleri ızgaraya otomatik olarak yerleştirme yeteneğidir. Her bir öğenin konumunu her zaman vermemize gerek yoktur.

Farklı kullanım durumları aracılığıyla, bu tür özelliklerin birkaç satır kodla karmaşık ve dinamik ızgara oluşturmamıza nasıl yardımcı olabileceğini göreceğiz.

Dinamik kenar çubuğu

Burada üç farklı düzenimiz var, ancak hepsi için çalışan yalnızca bir ızgara yapılandırmamız var.

main {
  display: grid;
  grid-template-columns: 1fr;
}

Tüm boş alanı yalnızca bir sütun kaplıyor. Bu bizim “açık” ızgaramızdır. Bir ızgara öğesine sığacak şekilde ayarlanmıştır. main ızgara kabı. Bu kadar. Bir sütun ve bir satır:

Ama ya oraya başka bir element bırakmaya karar verirsek, diyelim ki bir aside (dinamik kenar çubuğumuz). Şu anda (ve açıkça) tanımlandığı gibi, ızgaramız o öğe için bir yer bulmak için otomatik olarak ayarlanmalıdır. Ve CSS'mizle başka hiçbir şey yapmazsak DevTools'un bize neler olduğunu söylediğini burada görebilirsiniz.

hareket ettirebiliriz <aside> yanındaki bir sütuna <section>:

aside {
  grid-column-start: 2;
}

Ve DevTools'un şimdi bize söyledikleri:

Öğemizi ikinci sütuna yerleştiriyoruz ama… ikinci bir sütunumuz yok. Garip, değil mi? Hiçbir zaman ikinci bir sütun ilan etmedik. <main> ızgara kapsayıcı, ancak tarayıcı bizim için bir tane oluşturdu! Bu, incelediğimiz spesifikasyonun önemli kısmı:

Izgara öğeleri bu sınırların dışında konumlandırıldığında, ızgara kapsayıcısı, ızgaraya örtük ızgara çizgileri ekleyerek örtük ızgara izleri oluşturur.

Bu güçlü özellik, dinamik düzenlere sahip olmamızı sağlar. Eğer elimizde sadece <section> eleman, elde ettiğimiz tek şey bir sütun. Ama bir eklersek <aside> eleman, onu içermek için fazladan bir sütun oluşturulur.

yerleştirebiliriz <aside> önce <section> bunun yerine şöyle:

aside {
  grid-column-end: -2;
} 

Bu, örtülü sütunu sona yerleştiren önceki kodun aksine, örtülü sütunu kılavuzun başında oluşturur.

kullanarak aynı şeyi daha kolay yapabiliriz. grid-auto-flow herhangi bir ve tüm örtülü izleri bir akış içinde akacak şekilde ayarlama özelliği column yönü:

Şimdi belirtmeye gerek yok grid-column-start yerleştirmek <aside> öğesinin sağındaki <section>! Aslında, herhangi bir zamanda oraya atmaya karar verdiğimiz diğer herhangi bir ızgara öğesi artık her biri kendi örtülü ızgara izlerine yerleştirilmiş bir sütun yönünde akacaktır. Izgaradaki öğelerin sayısının önceden bilinmediği durumlar için mükemmel!

Hala ihtiyacımız var dedi grid-column-end solundaki bir sütuna yerleştirmek istersek, aksi takdirde <aside> açık sütunu işgal edecek ve bu da sırayla <section> açık ızgaranın dışında ve onu örtük sütunu almaya zorlar.

Biliyorum biliyorum. Bu biraz karışık. Bu küçük tuhaflığı daha iyi anlamak için kullanabileceğimiz başka bir örnek:

İlk örnekte herhangi bir yerleşim belirtmedik. Bu durumda, tarayıcı önce <aside> DOM'de ilk geldiğinden beri açık sütundaki öğe. bu <section>, bu arada, tarayıcının otomatik olarak (veya dolaylı olarak) bizim için oluşturduğu ızgara sütununa otomatik olarak yerleştirilir.

İkinci örnekte, <aside> açık ızgaranın dışındaki öğe:

aside {
  grid-column-end: -2;
}

Şimdi bunun bir önemi yok <aside> HTML'de ilk sırada gelir. yeniden atayarak <aside> başka bir yerde, biz yaptık <section> açık sütunu almak için kullanılabilir öğe.

Görüntü ızgarası

Büyük bir resmimiz ve yanında (veya altında) birkaç küçük resmin olduğu bir resim ızgarasıyla farklı bir şey deneyelim.

İki ızgara konfigürasyonumuz var. Ama tahmin et ne oldu? Ben herhangi bir ızgara tanımlamıyorum! Tek yaptığım şu:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Böyle bir şeyi ortaya çıkarmak için sadece bir kod satırına ihtiyacımız olması şaşırtıcı, bu yüzden neler olduğunu inceleyelim ve bunun düşündüğünüzden daha kolay olduğunu göreceksiniz. Her şeyden önce, grid-area aşağıdaki özellikleri tek bir bildirimde birleştiren bir kestirme özelliktir:

• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

Beklemek! değil mi grid-area tanımlamak için kullandığımız özellik adlandırılmış alanlar elemanların ızgarada nerede başlayıp bittiği yerine?

Evet, ama aynı zamanda daha fazlasını da yapıyor. hakkında çok daha fazla şey yazabiliriz grid-area, ancak bu özel durumda:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* ...is equivalent to: */
.grid img:first-child {
  grid-row-start: span 3;
  grid-column-start: span 3;
  grid-row-end: auto;
  grid-column-end: auto;
}

Steno versiyonunu genişletmek için açık DevTools'u kırarken de aynı şeyi görebiliriz:

Bu, ızgaradaki ilk görüntü öğesinin yayılması gerektiği anlamına gelir. üç sütun ve üç sıra. Ancak herhangi bir sütun veya satır tanımlamadığımız için tarayıcı bunu bizim için yapıyor.

Esasen ilk resmi HTML'ye 3⨉3'lük bir ızgarayı alacak şekilde yerleştirdik. Bu, diğer görüntülerin yeni bir şey belirtmeye gerek kalmadan aynı üç sütuna otomatik olarak yerleştirileceği anlamına gelir.

Özetlemek gerekirse, tarayıcıya, ilk görüntünün, ızgara kapsayıcısını kurarken asla açıkça tanımlamadığımız üç sütun ve üç satırlık alanı kaplaması gerektiğini söyledik. Tarayıcı bu sütunları ve satırları bizim için ayarlar. Sonuç olarak, HTML'deki kalan görüntüler, aynı üç sütun ve satırı kullanarak doğru yere akar. Ve ilk görüntü, ilk satırdaki üç sütunu da kapladığı için, kalan görüntüler, her görüntünün tek bir sütun kapladığı, her biri üç sütun içeren ek satırlara akar.

Bütün bunlar bir satır CSS'den! "Örtülü" ızgaranın ve otomatik yerleştirmenin gücü budur.

Bu demodaki ikinci ızgara konfigürasyonu için yaptığım tek şey, otomatik akış yönünü kullanarak değiştirmek. grid-auto-flow: column yerleştirirken daha önce yaptığımız gibi <aside> öğesinin yanındaki bir <section>. Bu, tarayıcıyı bir dördüncü kalan görüntüleri yerleştirmek için kullanabileceği sütun. Ve üç sıramız olduğu için kalan resimler aynı dikey sütuna yerleştirilir.

Herhangi bir taşma olmadan ızgaraya tam olarak sığmalarını sağlamak için görüntülere birkaç özellik eklememiz gerekiyor:

.grid {
  display: grid;
  grid-gap: 10px;
}

/* for the second grid configuration */
.horizontal {
  grid-auto-flow: column;
}

/* The large 3⨉3 image */
.grid img:first-child {
  grid-area: span 3 / span 3;
}

/* Help prevent stretched or distorted images */
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Ve elbette, bir değeri ayarlayarak daha fazla görüntüyü dikkate almak için ızgarayı kolayca güncelleyebiliriz. Bu olurdu 3 büyük görüntü için stillerde. Biz buna sahibiz:

.grid img:first-child {
  grid-area: span 3 / span 3;
}

Ancak, basitçe değiştirerek dördüncü bir sütun ekleyebiliriz. 4 yerine:

.grid img:first-child {
  grid-area: span 4 / span 4;
}

Daha da iyisi: Güncelleştirmeyi daha da kolaylaştırmak için bunu özel bir özellik olarak ayarlayalım.

Dinamik düzenler

Kenar çubuğuyla ilk kullanım durumu, ilk dinamik düzenimizdi. Şimdi, eleman sayısının ızgara konfigürasyonunu belirleyeceği daha karmaşık düzenleri ele alacağız.

Bu örnekte, ızgaranın herhangi bir garip boşluk veya eksik boşluk bırakmadan öğelerin sayısına güzel bir şekilde uyacak şekilde ayarlandığı bir ila dört öğeye sahip olabiliriz.

Bir elementimiz olduğunda hiçbir şey yapmıyoruz. Öğe, ızgara tarafından otomatik olarak oluşturulan tek satır ve sütunu doldurmak için gerilir.

Bit ikinci elemanı eklediğimizde, kullanarak başka bir (örtük) sütun oluştururuz. grid-column-start: 2.

Üçüncü bir öğe eklediğimizde, iki sütunun genişliğini almalı - bu yüzden kullandık grid-column-start: span 2, ancak yalnızca :last-child çünkü (ve ne zaman) dördüncü bir öğe eklersek, o öğe yalnızca tek bir sütun almalıdır.

Bunu ekleyerek, elimizde dört ızgara konfigürasyonu ancak ile iki beyan ve örtük ızgaranın büyüsü:

.grid {
  display: grid;
}
.grid :nth-child(2) {
  grid-column-start: 2;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}

Bir tane daha deneyelim:

Yalnızca bir veya iki öğeye sahip olduğumuz birinci ve ikinci durumlar için hiçbir şey yapmıyoruz. Yine de üçüncü bir öğe eklediğimizde, tarayıcıya şunu söyleriz: :last-child — iki sütuna yayılmalıdır. Dördüncü bir eleman eklediğimizde, tarayıcıya o elemanın ikinci sütuna yerleştirilmesi gerektiğini söyleriz.

.grid {
  display: grid;
}
.grid :nth-child(3):last-child {
  grid-column-start: span 2;
}
.grid :nth-child(4) {
  grid-column-start: 2;
}

Hileyi anlamaya mı başladın? Öğe sayısına göre tarayıcıya özel talimatlar veriyoruz (kullanarak :nth-child) ve bazen bir talimat düzeni tamamen değiştirebilir.

Farklı içeriklerle çalıştığımızda boyutlandırmanın aynı olmayacağına dikkat edilmelidir:

Öğelerimiz için herhangi bir boyut tanımlamadığımız için, tarayıcı bunları içeriklerine göre bizim için otomatik olarak boyutlandırır ve az önce gördüğümüzden farklı boyutlandırmayla sonuçlanabilir. Bunu aşmak için yapmamız gereken açıkça tüm sütunların ve satırların eşit boyutta olduğunu belirtin:

grid-auto-rows: 1fr;
grid-auto-columns: 1fr;

Hey, henüz bu mülklerle oynamadık! grid-auto-rows ve grid-auto-columns bir ızgara kapsayıcısında sırasıyla örtük satırların ve sütunların boyutunu ayarlayın. Veya, olarak özellik açıklıyor:

The grid-auto-columns ve grid-auto-rows özellikler tarafından bir boyut atanmamış parçaların boyutunu belirtir grid-template-rows or grid-template-columns.

İşte altı elemente kadar gidebileceğimiz başka bir örnek. Bu sefer kodu incelemene izin vereceğim. Endişelenmeyin, seçiciler karmaşık görünebilir ancak mantık oldukça basittir.

Altı unsurla bile, sadece iki bildirime ihtiyacımız vardı. Birkaç satır kodla elde edebileceğimiz tüm karmaşık ve dinamik düzenleri hayal edin!

buna ne oluyor grid-auto-rows ve neden üç değer alıyor? Üç satır mı tanımlıyoruz?

Hayır, üç satır tanımlamıyoruz. Ama biz vardır örtük satırlarımız için bir model olarak üç değer tanımlamak. Mantık aşağıdaki gibidir:

• Bir satırımız varsa, ilk değerle boyutlandırılacaktır.
• İki sıramız varsa, birincisi birinci değeri, ikincisi ikinci değeri alır.
• Üç satırımız varsa, üç değer kullanılacaktır.
• Dört sıramız varsa (ve işte ilginç kısım geliyor), ilk üç satır için üç değeri kullanırız ve dördüncü satır için ilk değeri tekrar kullanırız. Bu nedenle, tüm örtük satırları boyutlandırmak için tekrarladığımız bir tür kalıptır.
• 100 sıramız varsa, üçe üç boyutlandırılacaklar. 2fr 2fr 1fr 2fr 2fr 1fr 2fr 2fr 1fr, vb.

aksine grid-template-rows satır sayısını ve boyutlarını tanımlayan, grid-auto-rows yalnızca yol boyunca oluşturulabilecek satırları boyutlandırır.

Örneğimize geri dönersek, mantık iki satır oluşturulduğunda eşit boyuta sahip olmaktır (kullanacağız 2fr 2fr), ancak üçüncü bir satır oluşturulursa onu biraz daha küçültürüz.

ızgara desenleri

Bu sonuncusu için, kalıplar hakkında konuşacağız. Muhtemelen bir sütunun diğerinden daha geniş olduğu ve her satırın bu sütunların yerleşimini değiştirdiği iki sütun düzenini görmüşsünüzdür.

Bu sıralama düzeni, tam olarak ne kadar içerikle uğraştığımızı bilmeden çekilmesi zor olabilir, ancak CSS Grid'in örtük otomatik yerleştirme güçleri onu göreceli bir çocuk oyuncağı haline getiriyor.

Koda bir göz atın. Karmaşık görünebilir ama hadi onu parçalayalım çünkü oldukça basit olduğu ortaya çıkıyor.

Yapılacak ilk şey, kalıbı tanımlamaktır. Kendinize sorun: "Desen kaç öğeden sonra tekrar etmeli?" Bu durumda her dört elementten sonra gelir. Şimdilik sadece dört element kullanmaya bakalım:

Şimdi, ızgarayı tanımlayalım ve genel kalıbı şu şekilde ayarlayalım: :nth-child elemanlar arasında geçiş yapmak için seçici:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows equal to 100px */
}
.grid :nth-child(4n + 1) { /* ?? */ }
.grid :nth-child(4n + 2) { /* ?? */ }
.grid :nth-child(4n + 3) { /* ?? */ }
.grid :nth-child(4n + 4) { /* ?? */ }

Desenimizin her dört elementte bir tekrar ettiğini söyledik, bu yüzden mantıklı bir şekilde kullanacağız. 4n + x nerede x 1'den 4'e kadardır. Modeli şu şekilde açıklamak biraz daha kolaydır:

4(0) + 1 = 1 = 1st element /* we start with n = 0 */
4(0) + 2 = 2 = 2nd element
4(0) + 3 = 3 = 3rd element
4(0) + 4 = 4 = 4th element
4(1) + 1 = 5 = 5th element /* our pattern repeat here at n = 1 */
4(1) + 2 = 6 = 6th element
4(1) + 3 = 7 = 7th element
4(1) + 4 = 8 = 8th element
4(2) + 1 = 9 = 9th element /* our pattern repeat again here at n = 2 */
etc.

Mükemmel, değil mi? Dört elementimiz var ve deseni beşinci elementte, dokuzuncu elementte vb. tekrarlıyoruz.

Bunlar :nth-child seçiciler zor olabilir! Chris'in süper yardımseverliği var her şeyin nasıl çalıştığının açıklaması, dahil olmak üzere farklı desenler oluşturmak için tarifler.

Şimdi her bir elemanı şu şekilde yapılandırıyoruz:

1. İlk öğenin iki sütun alması ve birinci sütundan başlaması gerekir (grid-column: 1/span 2).
2. İkinci eleman üçüncü sütuna yerleştirilir (grid-column-start: 3).
3. Üçüncü öğe ilk sütuna yerleştirilir: (grid-column-start: 1).
4. Dördüncü öğe iki sütun alır ve ikinci sütundan başlar: (grid-column: 2/span 2).

İşte CSS'de:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: 1/span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 3; }
.grid :nth-child(4n + 3) { grid-column-start: 1; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Burada durabilir ve işimiz bitebilir… ama daha iyisini yapabiliriz! Spesifik olarak, bazı beyanları kaldırabilir ve işi bizim yerimize yapması için şebekenin otomatik yerleştirme yetkilerine güvenebiliriz. Bu, groklamanın en zor kısmıdır ve neyin kaldırılabileceğini belirleyebilmek için çok fazla pratik gerektirir.

Yapabileceğimiz ilk şey güncellemek grid-column: 1 /span 2 ve sadece kullan grid-column: span 2 çünkü tarayıcı varsayılan olarak ilk öğeyi ilk sütuna yerleştirecektir. Bunu da kaldırabiliriz:

.grid :nth-child(4n + 3) { grid-column-start: 1; }

Izgara, birinci, ikinci ve dördüncü öğeleri yerleştirerek üçüncü öğeyi otomatik olarak doğru yere yerleştirir. Bu, bununla kaldığımız anlamına gelir:

.grid {
  display: grid;
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
  grid-auto-columns: 1fr; /* all the columns are equal */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 2) { grid-column-start: 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Ama hadi dolaşıp daha iyisini yapabiliriz! Bunu da kaldırabiliriz:

.grid :nth-child(4n + 2) { grid-column-start: 2; }

Neden? Niye? Dördüncü öğeyi ikinci sütuna yerleştirirken iki tam sütun almasına izin verirsek, ızgarayı üçüncü bir örtük sütun oluşturmaya zorlarız ve bize açıkça söylemeden toplam üç sütun verir. Dördüncü öğe, ilk öğe de iki sütun aldığından ilk satıra giremez, bu nedenle bir sonraki satıra akar. Bu yapılandırma bize ilk satırda boş bir sütun ve ikinci satırda boş bir sütun bırakıyor.

Sanırım hikayenin sonunu biliyorsun. Tarayıcı, ikinci ve üçüncü öğeleri bu boş noktalara otomatik olarak yerleştirecektir. Böylece kodumuz daha da basitleşiyor:

.grid {
  display: grid;
  grid-auto-columns: 1fr; /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1) { grid-column: span 2; }
.grid :nth-child(4n + 4) { grid-column: 2/span 2; }

Tek gereken, çok havalı ve çok esnek bir model oluşturmak için beş bildirimdir. Optimizasyon kısmı zor olabilir, ancak alışırsınız ve pratik yaparak bazı püf noktaları kazanırsınız.

Neden kullanmıyorsun grid-template-columns sütun sayısını bildiğimiz için açık sütunları tanımlamak için?

Bunu yapabiliriz! İşte bunun için kod:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* all the columns are equal */
  grid-auto-rows: 100px; /* all the rows are equal to 100px */
}
.grid :nth-child(4n + 1),
.grid :nth-child(4n + 4) {
  grid-column: span 2;
}

Gördüğünüz gibi, kod kesinlikle daha sezgisel. Üç açık ızgara sütunu tanımlarız ve tarayıcıya birinci ve dördüncü öğelerin iki sütun alması gerektiğini söyleriz. Bu yaklaşımı şiddetle tavsiye ederim! Ancak bu makalenin amacı, CSS Grid'in örtük ve otomatik yerleştirme güçlerinden aldığımız yeni fikirleri ve püf noktalarını keşfetmektir.

Açık yaklaşım daha basittir, örtük bir ızgara, CSS'nin sahne arkasında ek işler yaptığı boşlukları - puntoyu bağışlayın - doldurmanızı gerektirir. Sonunda, örtük ızgaraları sağlam bir şekilde anlamanın CSS Izgara algoritmasını daha iyi anlamanıza yardımcı olacağına inanıyorum. Sonuçta, bariz olanı incelemek için burada değiliz - vahşi bölgeleri keşfetmek için buradayız!

Bu sefer biraz daha hızlı başka bir desen deneyelim:

Modelimiz her altı öğede bir tekrar ediyor. Üçüncü ve dördüncü öğelerin her birinin iki tam satırı işgal etmesi gerekir. Üçüncü ve dördüncü elemanları yerleştirirsek diğerlerine dokunmamıza gerek yok gibi görünüyor, o halde şunları deneyelim:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 3) {
  grid-area: span 2/2; /* grid-row-start: span 2 && grid-column-start: 2 */
}
.grid :nth-child(6n + 4) {
  grid-area: span 2/1; /* grid-row-start: span 2 && grid-column-start: 1 */
}

İyi değil. İkinci elemanı ilk sütuna yerleştirmemiz gerekiyor. Aksi takdirde, ızgara otomatik olarak ikinci sütuna yerleştirecektir.

.grid :nth-child(6n + 2) {
  grid-column: 1; /* grid-column-start: 1 */
}

Daha iyi, ama daha çok iş var, Üçüncü öğeyi en üste kaydırmamız gerekiyor. İlk sıraya şu şekilde yerleştirmeyi denemek cazip gelebilir:

.grid :nth-child(6n + 3) {
  grid-area: 1/2/span 2; 
    /* Equivalent to:
       grid-row-start: 1;
       grid-row-end: span 2;
       grid-column-start: 2 
     */
}

Ama bu işe yaramıyor çünkü hepsini zorluyor. 6n + 3 karışık bir düzen oluşturan aynı alana yerleştirilecek öğeler. Gerçek çözüm, üçüncü öğenin ilk tanımını tutmak ve eklemektir. grid-auto-flow: dense boşlukları doldurmak için. MDN'den:

[The] "yoğun" paketleme algoritması doldurmaya çalışır ızgarada daha önce deliklerde, daha küçük öğeler daha sonra ortaya çıkarsa. Bu, öğelerin bozuk görünmesine neden olabilir, aksi takdirde daha büyük öğeler tarafından bırakılan delikler doldurulur. Atlanırsa, yerleştirme algoritmasının öğeleri yerleştirirken ızgarada yalnızca "ileri" hareket ettiği, boşlukları doldurmak için asla geri dönmediği bir "seyrek" algoritma kullanılır. Bu, daha sonraki öğeler tarafından doldurulabilecek delikler bıraksa bile, otomatik olarak yerleştirilen tüm öğelerin "sıralı" görünmesini sağlar.

Bu özelliğin çok sezgisel olmadığını biliyorum, ancak bir yerleştirme sorunuyla karşılaştığınızda bunu asla unutmayın. Farklı konfigürasyonları boşuna denemeden önce, ek bir çaba harcamadan düzeninizi düzeltebileceği için ekleyin.

Neden bu özelliği varsayılan olarak her zaman eklemiyorsunuz?

Tavsiye etmiyorum çünkü bazı durumlarda bu davranışı istemiyoruz. MDN'nin oradaki açıklamasının, daha büyük öğelerin bıraktığı boşlukları doldurmak için öğelerin "sıra dışı" akmasına neden olduğundan bahsettiğine dikkat edin. Görsel sıra, özellikle erişilebilir arayüzler söz konusu olduğunda, genellikle kaynak sıra kadar önemlidir ve grid-auto-flow: dense bazen görsel ve kaynak sıra arasında uyumsuzluğa neden olabilir.

O zaman son kodumuz:

.grid {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: dense;
  grid-auto-rows: 100px;
}
.grid :nth-child(6n + 2) { grid-column: 1; }
.grid :nth-child(6n + 3) { grid-area: span 2/2; }
.grid :nth-child(6n + 4) { grid-row: span 2; }

Bir diğeri? Hadi gidelim!

Bunun için çok fazla konuşmayacağım ve bunun yerine size kullandığım kodun bir örneğini göstereceğim. Bu koda nasıl ulaştığımı anlayıp anlamadığınızı görmeye çalışın:

Siyah renkli öğeler ızgaraya dolaylı olarak yerleştirilir. Aynı düzeni benim oraya nasıl ulaştığımdan daha fazla yoldan elde edebileceğimize dikkat edilmelidir. Bunları da çözebilir misin? kullanmaya ne dersin grid-template-columns? Çalışmalarınızı yorum bölümünde paylaşın.

Size son bir örnek bırakacağım:

Yapmam bir çözüm bul Bunun için ama uygulama sırası sizde. Öğrendiğimiz her şeyi alın ve bunu kendiniz kodlamaya çalışın ve ardından benim çözümümle karşılaştırın. Ayrıntılı bir şeyle bitirirseniz endişelenmeyin - en önemli şey çalışan bir çözüm bulmaktır.

Daha fazla istemek?

Bitirmeden önce, burada ele aldığımız tekniklerin çoğunu kullanan yanıtlarla birlikte atladığım CSS Izgarası ile ilgili birkaç Yığın Taşması sorusu paylaşmak istiyorum. Bu şeylerin işe yaradığı yerlerde kaç tane gerçek kullanım senaryosu ve gerçek dünya durumunun ortaya çıktığını gösteren iyi bir liste:

Tamamlayan

CSS Izgarası yıllardır var, ancak hala çok az bilinen ve yaygın olarak tartışılmayan çok sayıda hile var. Örtük ızgara ve otomatik yerleştirme özellikleri bunlardan ikisidir!

Ve evet, bu zorlayıcı olabilir! Örtük ızgaraların arkasındaki mantığı anlamak çok zamanımı aldı ve hala otomatik yerleştirme ile mücadele ediyorum. Açık ve örtük ızgaralar etrafında kafanızı sarmak için daha fazla zaman harcamak istiyorsanız, göz atmaya değer birkaç ek açıklama ve örnek:

Benzer şekilde, hakkında okumak isteyebilirsiniz grid-auto-columns CSS-Tricks Almanac'ta, çünkü Mojtaba Seyedi çok ayrıntıya giriyor ve davranışı açıklamaya yardımcı olacak inanılmaz derecede faydalı görseller içeriyor.

Başlarken söylediğim gibi, burada ele aldığımız yöntemler, ızgaralar oluşturmak için zaten bildiğiniz yaygın yöntemlerin yerini alması anlamına gelmez. Ben sadece bazı durumlarda yardımcı olabilecek farklı yolları araştırıyorum.