CSS ızgara düzenlerini inceleme

Sofia Emelianova
Sofia Emelianova

Bu kılavuzda, bir sayfadaki CSS ızgaralarını nasıl bulacağınız, inceleyeceğiniz ve Chrome Geliştirici Araçları'nın Öğeler panelinde düzen sorunlarını nasıl gidereceğiniz açıklanmaktadır.

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

CSS ızgaralarını keşfetme

Sayfanızdaki bir HTML öğesine display: grid veya display: inline-grid uygulandığında Öğeler panelinde öğenin yanında bir grid rozeti görürsünüz.

Keşfet ızgarası

Sayfada ızgara yer paylaşımının görüntülenmesini değiştirmek için rozeti tıklayın. Yer paylaşımı, öğenin üzerinde görünür ve ızgara çizgilerinin ve kanallarının konumunu göstermek için ızgara gibi düzenlenir:

Izgara rozetini açın/kapatın.

Düzen bölmesini açın. Bir sayfaya tablolar eklendiğinde, Düzen bölmesinde bu tabloları görüntülemeyle ilgili çeşitli seçenekler içeren bir Tablo bölümü bulunur.

Düzen bölmesi.

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

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

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

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

    Izgara Düzenleyici düğmesi.

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

    CSS özelliklerini ayarlama.

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

Izgara görüntüleme seçenekleri

Düzen bölmesinde bulunan Izgara bölümü 2 alt bölümden oluşur:

  • Görüntüleme ayarlarına yer paylaşımı uygula
  • Kılavuz yer paylaşımları

Bu alt bölümlerin her birini ayrıntılı olarak inceleyelim.

Görüntüleme ayarlarına yer paylaşımı uygula

Görüntüleme ayarlarına yer paylaşımı uygula 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ının çizgi etiketlerini gizleyebilirsiniz.
  • Satır numaralarını göster: Her ızgara yer paylaşımının satır numaralarını gösterin (varsayılan olarak seçilidir).
  • Çizgi adlarını göster: Çizgi adları içeren ızgaralarda her ızgara yer paylaşımının çizgi adlarını gösterir.

b. Aşağıdakiler gibi seçenekleri içeren onay kutuları:

  • Yol boyutlarını göster: Yol boyutlarını göstermek veya gizlemek için düğmeyi açın veya kapatın.
  • Bölge adlarını göster: Adlandırılmış ızgara alanlarına sahip ızgaralarda bölge adlarını göstermek veya gizlemek için açma/kapatma düğmesini kullanın.
  • Izgara çizgilerini uzat: Varsayılan olarak ızgara çizgileri yalnızca display: grid veya display: inline-grid ayarlanmış öğenin içinde gösterilir. Bu seçenek etkinleştirildiğinde ızgara çizgileri her eksen boyunca görüntü alanının kenarına kadar uzar.

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österilir.

Satır numaralarını gösterin.

Çizgi etiketlerini gizleme

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

Çizgi etiketlerini gizleyin.

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, sol, orta1, orta2 ve sağ adlarına sahip dört satır vardır.

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

Çizgi adlarını gösterin.

Yol boyutlarını göster

Kılavuz yolun yol boyutlarını görüntülemek için Yol boyutlarını göster onay kutusunu etkinleştirin.

DevTools her satır etiketinde [authored size] - [computed size] gösterir: Yazar tarafından oluşturulan boyut: Stil sayfasında tanımlanan boyut (tanımlanmamışsa atlanır). Hesaplanmış boyut: Ekrandaki gerçek boyut.

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

Stil sayfasında tanımlanmış satır boyutu olmadığından satır çizgisi etiketleri yalnızca hesaplanmış boyutları gösterir: 80 piksel ve 80 piksel.

Yol boyutlarını gösterin.

Alan adlarını göster

Bölge adlarını görüntülemek için Bölge adlarını göster onay kutusunu etkinleştirin. Bu örnekte, ızgaradaki üç alan üst, alt1 ve alt2 olarak adlandırılmıştır.

Bölge adlarını gösterin.

Kılavuz çizgilerini uzat

Kılavuz çizgilerini her eksen boyunca görüntü alanının kenarına kadar uzatmak için Kılavuz çizgilerini uzat onay kutusunu etkinleştirin.

Kılavuz çizgilerini uzatabilirsiniz.

Kılavuz yer paylaşımları

Izgara yer paylaşımları bölümünde, sayfada bulunan ve her biri onay kutusu içeren çeşitli seçeneklerin yanı sıra ızgaraların listesi yer alır.

Birden fazla ızgaranın yer paylaşımı görünümlerini etkinleştirme

Birden fazla ızgaranın yer paylaşımı görünümlerini etkinleştirebilirsiniz. Bu örnekte, her biri farklı renklerle temsil edilen iki ızgara yer paylaşımı etkindir: main ve div.snack-box.

Birden fazla ızgaranın yer paylaşımı görünümlerini etkinleştirin.

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

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

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

Izgarayı vurgulama

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

Izgarayı vurgulama