Tarayıcı hata ayıklayıcısında grid görünümü

Bir web sitesi oluştururken grid'lerle çalışırken, öğelerin grid içinde doğru şekilde yerleştirilip yerleştirilmediğini kontrol etmek gerekebilir. Ayrıca, eğer bir hata yapmışsak, hangi öğeden kaynaklandığını anlamalıyız. Bu amaçla tarayıcının hata ayıklayıcısını kullanabiliriz.

Chrome tarayıcısındaki hata ayıklayıcıyı kullanarak bir grid örneğine bakalım. Öncelikle ilgilendiğimiz grid nesnesini seçip sağ tıklayarak listeden 'İncele' seçeneğini seçiyoruz:

Şimdi, tarayıcının sağ tarafında açılan panelde grid nesnemizin üzerine geliyoruz ve ana öğenin yanındaki satırda grid butonunun olduğunu görüyoruz:

grid butonuna tıkladıktan sonra, nesnemizin görsel olarak anlaşılır bir grid sistemi içinde görüntülendiğini, tüm sütun ve satırların numaralandırıldığını göreceğiz:

Şimdi hata ayıklayıcıdaki panele dikkat edin. İçinde Styles, Computed, Layout vb. sekmeler bulunuyor. Varsayılan olarak aktif olan Styles sekmesinden Layout sekmesine geçiş yapın. Grid'inize ait ayarların bir listesini göreceksiniz:

İz boyutlarını gösteren ilk seçeneği Show track sizes'i görüntülemek için seçelim:

Show area names seçeneği ile, tanımlandıysa, grid alan adlarını görüntüleyebiliriz. Extend grid lines seçeneğini seçersek grid çizgilerinin grid sınırları dışına uzatıldığını göreceğiz: