CSS ızgara düzenlerini inceleme

Jecelyn Yeen

Sofia Emelianova

Bu kılavuzda, Chrome Geliştirici Araçları'nın Öğeler panelinde bir sayfadaki CSS ızgaralarını nasıl keşfedeceğiniz, inceleyebileceğiniz ve düzen sorunlarını nasıl ayıklayacağınız gösterilmektedir.

Bu makalede görünen ekran görüntülerinde gösterilen örnekler şu iki web sayfasından alınmıştır: Meyve kutusu ve Atıştırmalık kutusu.

CSS ızgaralarını keşfetme

Sayfanızdaki bir HTML öğesine display: grid veya display: inline-grid uygulanmışsa Öğeler panelinde bu öğenin yanında bir grid rozeti görebilirsiniz.

Sayfada ızgara yer paylaşımı görüntülenmesini açıp kapatmak için rozeti tıklayın. Bindirme, ızgara çizgilerinin ve parkurlarının konumunu göstermek için bir ızgara gibi yerleştirilmiş şekilde öğenin üzerinde görünür:

Düzen bölmesini açın. Bir sayfaya ızgaralar eklendiğinde Düzen bölmesinde, bu ızgaraları görüntülemek için çeşitli seçeneklerin bulunduğu bir Izgara bölümü yer alır.

Izgara öğelerini ve içeriklerini Izgara Düzenleyici ile hizalama

Izgara öğelerini ve içeriklerini CSS kuralları yazmak yerine bir düğmeyi tıklayarak hizalayabilirsiniz.

Izgara öğelerini ve içeriklerini hizalamak için:

1. Öğeler > Stiller bölmesinde, display: grid öğesinin yanındaki Izgara Düzenleyici düğmesini tıklayın.

   

2. Izgara Düzenleyici'de, ızgara öğeleri ve bunların içerikleri için align-* ve justify-* CSS özelliklerini ayarlamak üzere ilgili düğmeleri tıklayın.

   

3. Görüntü alanındaki ayarlanmış ızgara öğelerini ve içeriğini inceleyin.

Tablo görüntüleme seçenekleri

Düzen bölmesindeki Izgara bölümü 2 alt bölüm içerir:

• Yer paylaşımlı ekran ayarları
• Izgara yer paylaşımları

Şimdi bu alt bölümlerin her birini ayrıntılı olarak inceleyelim.

Yer paylaşımlı ekran ayarları

Yer paylaşımlı görüntüleme ayarları iki bölümden oluşur:

a. Aşağıdaki seçenekleri içeren bir açılır menü:

• Çizgi etiketlerini gizle: Her bir ızgara yer paylaşımı için çizgi etiketlerini gizleyin.
• Satır numaralarını göster: Her bir ızgara yer paylaşımı için satır numaralarını gösterir (varsayılan olarak seçilidir).
• Satır adlarını göster: Satır adları olan ızgaralar söz konusu olduğunda her ızgara yer paylaşımı için satır adlarını gösterir.

b. Şu seçenekler içindeki onay kutuları:

• Parça boyutlarını göster: Parça boyutlarını göstermek veya gizlemek için açın.
• Alan adlarını göster: Adlandırılmış ızgara alanları içeren ızgaralar söz konusu olduğunda alan adlarını göstermek veya gizlemek için geçiş yapın.
• Kılavuz çizgilerini uzatma: Varsayılan olarak, ızgara çizgileri öğenin içinde yalnızca üzerinde display: grid veya display: inline-grid ayarlanmış olarak gösterilir. Bu seçenek açıldığında, ızgara çizgileri her bir eksen boyunca görüntü alanının kenarına uzanır.

Bu ayarları daha ayrıntılı olarak inceleyelim.

Satır numaralarını göster

Varsayılan olarak, pozitif ve negatif satır sayıları ızgara yer paylaşımında görüntülenir.

Çizgi etiketlerini gizle

Satır numaralarını gizlemek için Satır etiketlerini gizle'yi seçin.

Çizgi adlarını göster

Sayılar yerine satır adlarını görüntülemek için Satır adlarını göster'i seçebilirsiniz. Bu örnekte, bir ada sahip dört satır var: sol, orta1, orta2 ve sağ.

Bu demoda turuncu öğe, CSS grid-column: left / right ile soldan sağa genişliyor. Satır adlarını göstermek, öğenin başlangıç ve bitiş konumunun görselleştirmeyi kolaylaştırır.

Parça boyutlarını göster

Izgaranın yol boyutlarını görüntülemek için Kanal boyutlarını göster onay kutusunu etkinleştirin.

Geliştirici Araçları, her satır etiketinde [authored size] - [computed size] değerini gösterir: Yazar boyut: Stil sayfasında tanımlanan boyut (tanımlanmamışsa yoksayılır). Hesaplanan boyut: Ekrandaki gerçek boyut.

Bu demoda, snack-box sütun boyutları CSS grid-template-columns:1fr 2fr; içinde tanımlanmıştır. Bu nedenle, sütun satırı etiketleri hem yazılan hem de hesaplanan boyutları gösterir: 1fr - 96,66 piksel ve 2fr - 193,32 piksel.

Stil sayfasında tanımlanmış herhangi bir satır boyutu olmadığından, satır satırı etiketleri yalnızca hesaplanan boyutları gösterir: 80px ve 80px.

Alan adlarını göster

Alan adlarını görüntülemek için Alan adlarını göster onay kutusunu etkinleştirin. Bu örnekte, ızgarada üç alan vardır: top, bottom1 (alt1), bottom2.

Kılavuz çizgilerini uzat

Izgara çizgilerini her bir eksen boyunca görüntü alanının kenarına genişletmek için Izgara çizgilerini uzat onay kutusunu etkinleştirin.

Izgara yer paylaşımları

Izgara yer paylaşımları bölümü, sayfada bulunan ızgaraların listesini içerir. Bu listelerin her birinde bir onay kutusu ve çeşitli seçenekler yer alır.

Birden fazla ızgaranın yer paylaşımlı görünümlerini etkinleştir

Birden çok ızgaranın yer paylaşımlı görünümlerini etkinleştirebilirsiniz. Bu örnekte her biri farklı renklerle temsil edilen main ve div.snack-box olmak üzere iki ızgara yer paylaşımı etkinleştirilmiş.

Izgara yer paylaşımı rengini özelleştir

Renk seçiciyi tıklayarak her bir ızgara yer paylaşımı rengini özelleştirebilirsiniz.

Izgarayı vurgula

HTML öğesini hemen vurgulamak için vurgu simgesini tıklayın, sayfada öğeye gidin ve Öğeler panelinde öğeyi seçin.