CSS ızgara düzenlerini inceleme

Bu kılavuzda, bir sayfadaki CSS ızgaralarını nasıl keşfedeceğiniz, bunları nasıl inceleyeceğiniz ve Chrome Geliştirici Araçları'nın Öğeler panelindeki düzen sorunlarının nasıl ayıklanacağı 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şfedin

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ünümüne geçiş yapmak için rozeti tıklayın. Yer paylaşımı, öğenin üzerinde görünür ve ızgara çizgilerinin ve parkurlarının konumunu göstermek için bir ızgara gibi yerleştirilmiştir:

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çenekler içeren bir Izgara bölümü bulunur.

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

Izgara öğelerini ve içeriklerini, CSS kuralları yazmak yerine tek 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 içerikleri için align-* ve justify-* CSS özelliklerini ayarlamak için ilgili düğmeleri tıklayın.

   

3. Ayarlanan ızgara öğelerini ve görüntü alanındaki içeriği gözlemleyin.

Izgara görüntüleme seçenekleri

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

• Yer paylaşımlı görüntüleme ayarları
• Izgara yer paylaşımları

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

Yer paylaşımlı görüntüleme 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).
• Çizgi adlarını göster: Her ızgara yer paylaşımı için satır adlarını, çizgi adlarına sahip ızgaralar şeklinde gösterin.

b. Şu kapsamdaki seçeneklere sahip onay kutuları:

• Kanal boyutlarını göster: Kanal boyutlarını göstermeyi veya gizlemeyi açın veya kapatın.
• Alan adlarını göster: Adlandırılmış ızgara alanları içeren ızgaralarda alan adlarını göstermek veya gizlemek için geçiş yapın.
• Kılavuz çizgilerini genişletme: Varsayılan olarak, ızgara çizgileri yalnızca üzerinde display: grid veya display: inline-grid ayarlanmış olarak öğenin içinde gösterilir. Bu seçenek açıldığında ızgara çizgileri, her eksende 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 numaraları ı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.

Satır 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, şu adları taşıyan dört satırımız vardır: sol, orta1, orta2 ve sağ.

Bu demoda orange öğesi, CSS grid-column: left / right ile soldan sağa doğru uzanmaktadır. Satır adlarını göstermek, öğenin başlangıç ve bitiş konumunu görselleştirmeyi kolaylaştırır.

Parkur boyutlarını göster

Izgaranın kanal 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] gösterir: Yazılan boyut: Stil sayfasında tanımlanan boyut (tanımlanmamışsa atlanır). Hesaplanan boyut: Ekrandaki gerçek boyut.

Bu demoda, grid-template-columns:1fr 2fr; CSS'de snack-box sütun boyutları 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ımlı 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 ve bottom2.

Kılavuz çizgilerini uzat

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

Izgara yer paylaşımları

Izgara katmanları bölümünde, sayfada bulunan ızgaraların her biri birer onay kutusuyla birlikte çeşitli seçeneklerle birlikte listelenir.

Birden çok tablonun yer paylaşımlı görünümlerini etkinleştir

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

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

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

Izgarayı vurgula

HTML öğesini hemen vurgulamak için vurgulama simgesini tıklayın, sayfada ilgili öğeye gidin ve Nesneler panelinde ilgili öğeyi seçin.