Bölüm 1: Örtülü İzleri Anlama

Faydalı Alternatif Metin Yazma

İnsanların CSS Izgarası ile uğraştığını gözlemlerken, insanları diğerlerinden daha sık yakalayan veya bir düzen oluşturmaya gelince daha fazla zorluk yaratan birkaç sorun fark ettim. Bu kısa makale dizisi, bu yaygın sorunları inceleyecek ve yerleşim sorunlarını önceden tahmin edebilmeniz ve oluştuklarında daha kolay hata ayıklayabilmeniz için Grid’in daha iyi anlaşılmasını sağlamayı amaçlayacaktır.

Kazara örtülü izler

İnsanların mücadele ettiğini gördüğüm en büyük sorun, yanlışlıkla tüm bir düzeni kargaşaya sürükleyebilecek fazladan ızgara izleri oluşturmak. Bu ekstra parçalar olarak bilinir örtük izler ve dışına bir öğe yerleştirilerek oluşturulurlar. açık ızgara sınırı. Grid’den en iyi şekilde yararlanmak için, aşağıdaki kavramları anlamak iyi bir fikirdir. açık ve örtük ızgara ve birbirleriyle olan ilişkileri.

açık ızgara

Açık ızgara, aşağıdakiler kullanılarak tanımlanır: grid-template-rows ve grid-template-columns özellikler (veya stenografi grid-template Eğer tercih edersen):

.grid {
display: grid;
grid-template-rows: repeat(4, 150px);
grid-template-columns: repeat(4, 1fr);
}

Burada dört satırlı ve dört sütunlu bir ızgara tanımlıyoruz ve ızgaramızın en azından ne olursa olsun dört satır ve dört sütun. Yerleştirecek ızgara çocuğumuz olmasa bile, ızgaramız tamamen boşalsın, yine de yukarıda tanımladığımız dört satır ve dört sütunluk alanı kaplayacaktır.

Eğer kullandıysak repeat(4, auto) için grid-template-rows özelliği, ızgara satırlarımızın hepsinin yüksekliği auto – yani ızgara çocuğumuz olmasaydı, satırlarımız hala var olurdu, onları dolduracak herhangi bir içerik olmadan sıfır yüksekliğe kadar çökerlerdi. Bir satır boşluğu eklersek (örn. row-gap: 40px) o zaman satırlar arasındaki boşlukların birleşik yüksekliği ızgaramızın yüksekliğini oluşturur – bu nedenle herhangi bir içerik olmadan, bir yerde düzeninizi bozan ekstra büyük bir kenar boşluğu veya dolgu değeri gibi görünebilir!

Örtülü izler nedir?

Örtülü izler, yalnızca öğelerin yerleştirilmesiyle oluşturulan izlerdir. Grid’deki bu davranış kasıtlıdır ve çok faydalıdır. Örneğin, belirsiz sayıda öğeyle doldurmak istediğimiz dört sütunlu bir ızgaranız varsa (örneğin bir haber akışı. Öğelerin sayısını bilmiyorsak, kaç satıra ihtiyacımız olduğunu bilemeyiz). Varsayılan olarak, ızgara öğeleri bir sonraki kullanılabilir ızgara hücresine yerleştirilir. grid-template-rows özelliği ve Grid’in otomatik yerleşiminin içeriğimiz için doğru sayıda satır oluşturmasına izin verin.

(Yan not: Burada ızgaranın varsayılanı kullandığını varsayıyorum. grid-auto-flow: row. Bunu şu şekilde değiştirirseniz grid-auto-flow: column bunun yerine satır ekseninde örtülü izler oluşturulacaktır.)

.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
Izgaramızın dört sütunu var. Öğeler ilk satırı doldurur, ardından yenisi oluşturulur.

Örtük izlerin davranışını şu şekilde kontrol edebiliriz: grid-auto-rows ve grid-auto-columns.

.grid {
display: grid;
grid-template-rows: repeat(4, 150px);
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 150px;
}

Yukarıdaki kod, dört açık sütun ve satır izi tanımlamaya ek olarak, Grid’e oluşturulan tüm örtülü satır izlerinin sabit bir 150 piksel yüksekliğe sahip olması gerektiğini bildirir. Bu özellik isteğe bağlıdır ve onsuz herhangi bir örtük parçanın varsayılan boyutu şudur: auto.

öğeleri yerleştirme

Yeni oluşturduğumuz ızgaraya bir öğe yerleştirmek için şöyle bir şey yapabiliriz:

.item {
grid-column: 1 / 2;
grid-row: 3 / 5;
}

Izgara öğesini ızgaramızın sol alt köşesine yerleştirmek için başlangıç ​​ve bitiş çizgilerini kullanıyoruz.

Izgaranın sol alt tarafına yerleştirilen turuncu ızgara öğesi

Öğeleri açıkça kılavuz satır numarasına göre yerleştirdiğimiz için bu herhangi bir soruna neden olmayacak. Izgaramızın dört satırı ve dört sütunu olduğunu biliyoruz (bu nedenle her iki yönde de beş ızgara çizgisi), bu nedenle istemeden daha yüksek bir satır numarası kullanmamız ve kazara örtülü izler oluşturmamız olası değildir.

Alternatif olarak, kullanabiliriz açıklık başlangıç ​​veya bitiş satırı yerine anahtar kelime:

.item {
grid-column: 1 / 2;
grid-row: 3 / span 2;
}

kullanmayı seviyorum span ızgara yerleşimi için – bir öğenin belirli bir satırda bitmek yerine belirli sayıda ızgara izini kapsaması gerektiğini bildiğinizde genellikle yararlıdır – ancak bu, bazen bir öğeyi hangi ızgara çizgisine yerleştirdiğinizin izini kaybedebileceğiniz anlamına gelir.

İşte kullanıyoruz span yerine grid-row-end astar. eğer değiştirirsek açıklık değeri 2 yerine 3’tür, bu, öğenin mevcut olandan daha fazla satır izine yayılmasına neden olur – ve hey! Gizli bir iz oluşturduk!

Izgaranın sol alt tarafına yerleştirilen turuncu ızgara öğesi

Bu sorunun bazen ortaya çıktığı yerlerden biri, ızgara öğelerinin birbiriyle örtüşmesini istediğiniz zamandır. Açıkça yerleştirilmeyen öğeler, bir sonraki kullanılabilir ızgara hücresine yerleştirilir ve kullanılabilir bir ızgara hücresi yoksa, öğeler üst üste istiflenmek yerine örtülü izler oluşturulur. Bu davranış, her zaman öğeleri açıkça yerleştirmemiz gerekmediği için çok kullanışlıdır, ancak bu, bize özellikle yardımcı olmadığı durumlardan biridir!

Bir arkadaşım, biri diğerinin üstünde, ancak bir satırla dengelenmiş iki öğeyi konumlandırmak için Grid kullanıyordu:

Üst üste binen iki öğeye sahip bir ızgara düzeni

Düzeni oluşturmak için kullanılan kod budur:

.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 200px);
}

.item:first-child {
grid-column: span 4;
grid-row: 1 / span 2;
}

.item:nth-child(2) {
grid-column: span 4;
grid-row: 2 / span 2;
}

İstenen düzen yerine şunu elde ederiz:

İkinci öğenin sağa itildiği bir ızgara düzeni

İkinci maddeye ne oldu? Buradaki sorunu görebiliyor musunuz? Her iki öğe de açıklık için anahtar kelime grid-column değer. İlk öğe, 4’lük bir aralıkla ilk kullanılabilir hücreye otomatik olarak yerleştirileceğinden doğru şekilde konumlandırılacaktır. İkinci öğenin bir başlangıç ​​veya bitiş satırı yoktur, bu nedenle tarayıcının bunu çözmesi gerekir. örtük sütun izleri oluşturma.

İkinci öğenin yalnızca bir açıklık değer ve satır ekseninde başlangıç ​​satırı yoksa, öğe hala ızgara akışına katılacağı için sonraki satıra sarılır. Bu bizim istediğimiz düzen olmayacak, ama belki de daha az şaşırtıcı olurdu! Ancak yukarıdaki kodda tarayıcı, öğeyi hangi sütuna yerleştirmek istediğimizi bilmiyor. Bunu, öğeyi satır 5’ten başlayarak sütun eksenine yerleştirerek ve dört örtülü iz oluşturarak çözüyor.

çünkü biz kullanmıyoruz grid-auto-columns örtük izlerimiz için bir boyut tanımlamak için, bunlar varsayılan bir boyuta sahip olacaktır. auto. Izgara öğesinin içeriği yoksa, bu parçalar 0 genişliğe kadar daraltılarak öğemizi görünmez hale getirir. Izgara öğemiz bir miktar metin içeriyor, bu nedenle bu örtük parçalar buna uyum sağlamak için otomatik olarak boyutlandırılacaktır.

Eğer bir column-gap değeri, demek, 20pxizlerin kendileri 0 genişliğe sahip olsa da, ızgaramıza iki sütun aralığının genişliğinin eklendiğini görürdük.

Buradaki çözüm, her iki öğeyi de açıkça bir başlangıç ​​ve bitiş değeriyle yerleştirmektir:

.item:first-child {
grid-column: 1 / span 4;
grid-row: 1 / span 2;
}

.item:nth-child(2) {
grid-column: 1 / span 4;
grid-row: 2 / span 2;
}

Düzeni “kırmanın” farklı yollarını keşfetmek için aşağıdaki demoyla oynayın:

Kalemi Gör Izgara yerleştirme örneği Michelle Barker tarafından (@michellebarker) üzerinde kod kalemi.

Düzenlerimizin bozulmasını önleme

Öyleyse, örtük izlerle ilgili sorunlarla karşılaşmaktan en iyi şekilde nasıl kaçınabiliriz? Bunun bir yolu, Grid’in perde arkasındaki düzenimizi nasıl hesapladığını anlamaktır.

Izgara Öğesi Yerleştirme Algoritmasını Anlama

Bu kulağa gerçekte olduğundan daha korkutucu geliyor! bu Izgara Öğe Yerleştirme Algoritması ızgara öğelerinin yerleşiminin çözüldüğü sıradır. Önce açıkça konumlandırılan ızgara öğeleri, ardından belirli bir satır konumuna sahip öğeler, ardından tarayıcı örtülü ızgaradaki sütunları belirler ve otomatik olarak yerleştirilmiş öğeleri (açık konumu olmayan öğeler) buna göre yerleştirir. Bu varsayıyor grid-auto-flow mülk değeri row (varsayılan). Bunu akılda tutmak, beklentilerinize aykırıysa, neden bir eksende değil de diğerinde oluşturulan örtülü izlerin olabileceğini anlamanıza yardımcı olabilir.

Ayrıca, öğeleri yanlışlıkla açık ızgaradan itmekten kaçınmanıza yardımcı olabilecek öğeleri yerleştirmenin yolları için birkaç ipucum var…

Kılavuz çizgilerini adlandırma

Izgara yerleşimimde daha kasıtlı olmama yardımcı olan bir yol, ızgara çizgilerini adlandırmaktır. Diyelim ki yerleştirmek istediğimiz öğe bir resim. Bunu yapabilirdik:

.grid {
display: grid;
grid-template-rows:
repeat(2, 150px) [image-start] repeat(2, 150px)
[image-end];
grid-template-columns: [image-start] repeat(3, 1fr) [image-end] 1fr;
grid-auto-rows: 150px;
}

kullanma -Başlat ve -son satır adlarımız için bir son ek olarak, görüntüümüzü yerleştirmeyi çok basit hale getiren bir ızgara alanı oluşturur:

.image {
grid-area: image;
}

Ayrıca grid-template-areas benzer bir şey yapma özelliği, birçok insan için daha sezgisel geliyor – örtüşen ızgara öğelerine ihtiyacınız varsa bunun işe yaramayacağını unutmayın.

Bitiş çizgisine göre yerleştirme

Bazen bitiş satır numarasına göre yerleştirme (başlangıç ​​satırı numarasının aksine), kazayla örtülü izler oluşturma sorununu önlemeye yardımcı olabilir. Yukarıdaki örneğimizi alarak, belki de görüntünün üç ızgara izini kapsamasını istediğimizi biliyoruz, bu yüzden açıklık olarak anahtar kelime grid-column-end değer. Ama kullanmak daha iyi olabilir açıklık olarak grid-column-start değer ve açıkça bitiş satırına yerleştirin:

.image {
/* The image will end at line 4 on the column axis: */
grid-column: span 3 / 4;
}

Çok büyük bir ızgaramız varsa bu yardımcı olabilir. Izgaramızın sadece dört yerine 20 sütunu olduğunu hayal edin, sondan bir satır uzağa yerleştirilmesi gerektiğini biliyor olabiliriz, ancak her seferinde başlangıç ​​çizgisinin ne olması gerektiğini hesaplamak zorunda kalmak istemiyoruz – bu can sıkıcı olurdu. ve hataya açık!

Negatif ızgara çizgileri

Çok faydalı bulduğum bir teknik (ve daha önce yazılmış), ızgara öğelerini yerleştirmek için negatif satır numaralarını kullanıyor. Negatif satır numarası, ızgaranızın satırlarını tersten temsil eder. Yani dört izlik bir ızgarada (beş ızgara çizgisine sahip olacaktır), satır -1, satır 5’e eşittir, satır -2, satır 4’e eşittir, vb.

Yine, bu, büyük bir ızgarayla çalışırken çok kullanışlı olabilir. Eğer biliyorsak ve öğenin ızgaranın sonuna hizalanması gerekiyorsa, o zaman örneğin son satırın 21. satır olduğunu hatırlamak zorunda kalmak yerine, basitçe -1 ızgara satırını kullanabiliriz.

Geliştirme araçlarıyla hata ayıklama

CSS Grid ile ilgili sorunları incelemek ve hata ayıklamak için Firefox geliştirme araçlarını iyice öneriyorum. bu şebeke denetçisi satır numaralarını açmanıza izin verir, böylece örtük izlerinizin boyutları sıfıra kadar küçülmüş olsa bile, oluşturulduklarını yine de görebileceksiniz. (Müfettiş ayrıca size negatif satır numaralarını da gösterir – çok kullanışlıdır!)

Çözüm

Umarım bu makale, CSS Grid ile çalışırken açık ve açık izlerin gizemini çözmeye yönelik bir yol kat eder ve bozuk mizanpajlarda hata ayıklamanıza yardımcı olmak için sizi değerli bilgilerle donatır. Daha fazla makaleye göz atın CSS Izgarasında Hata Ayıklama dizi çok yakında.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.