Grid/Flex Görselleştirici, bir web sayfasındaki her CSS Grid ve Flexbox kapsayıcısını algılar ve düzen yapılarını doğrudan sayfada renkli kaplamalar olarak oluşturur. Grid çizgilerini, track boyutlarını, aralık değerlerini, flex yönlerini, hizalama eksenlerini ve alt öğe boyutlandırmasını — hepsini DevTools açmadan görselleştirilmiş olarak görün.
CSS Grid ve Flexbox modern web düzeninin temelleridir, ancak varsayılan olarak görünmezler. Sayfaya sadece bakarak grid çizgilerini, flex eksenlerini veya aralık değerlerini göremezsiniz. Tarayıcı DevTools bazı grid kaplama özellikleri sunar, ancak önce Öğeler panelinde kapsayıcıyı bulmanızı, kaplamayı manuel olarak etkinleştirmenizi ve aynı anda yalnızca bir kapsayıcı göstermenizi gerektirir. Grid/Flex Görselleştirici bunu tamamen otomatikleştirir — sayfayı tarar, her Grid ve Flex kapsayıcısını bulur ve düzen yapılarını görsel kaplamalar olarak oluşturur. Grid kapsayıcıları etiketli track boyutlarıyla sütun ve satır çizgilerini gösterir. Flex kapsayıcıları ana eksen yönünü, çapraz eksen hizalamasını ve alanın nasıl dağıtıldığını gösterir. Aralıklar piksel değerlerini gösteren renkli bantlarla vurgulanır. Her düzen özelliğinin listelendiği ayrıntılı bir özellik panelini görmek için herhangi bir kapsayıcıya tıklayın.
Grid kapsayıcıları her satır ve sütun track'i için renkli çizgiler gösterir. Track boyutları (1fr, auto, 200px) her çizgide etiketlenir. Aralık alanları aralık değerini piksel cinsinden gösteren yarı saydam bantlarla vurgulanır. Örtük ve açık track'ler düz ve kesik çizgilerle ayırt edilir.
Flex kapsayıcıları ana ekseni bir ok olarak (row, row-reverse, column, column-reverse) ve ona dik çapraz ekseni gösterir. justify-content ve align-items, alanın alt öğeler arasında nasıl dağıtıldığını gösteren etiketli hizalama göstergeleriyle görselleştirilir.
Araç tüm sayfayı otomatik olarak tarar ve display: grid veya display: flex olan her öğeyi bulur (satır içi varyantlar dahil). Bir rozet sayısı algılanan toplam sayıyı gösterir. Öğeleri manuel olarak seçmeye gerek yok — hepsi otomatik olarak bulunur ve listelenir.
Herhangi bir kapsayıcıya tıklayarak tam düzen özelliklerini görün: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap ve tüm alt boyutlandırma özellikleri (flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
Bir Grid veya Flex kapsayıcısındaki her alt öğe gerçek oluşturulmuş boyutunu, flex-grow/shrink değerlerini ve grid alan yerleşimini gösterir. Her alt öğenin ne kadar alan kapladığını ve nedenini tam olarak görün.
Diğer Grid/Flex kapsayıcıları içinde iç içe geçmiş Grid ve Flex kapsayıcılarını algılar. Kaplama her iç içe geçme seviyesini farklı renklerle oluşturur, böylece tam düzen hiyerarşisini görebilirsiniz.
Bir grid sütunu beklenenden daha mı geniş veya daha mı dar? Kaplama gerçek track boyutlarını gösterir (1fr 342px'e, auto 156px'e çözümlendi), böylece tarayıcının boyutları nasıl hesapladığını tam olarak görebilirsiniz.
Bir flex alt öğesi neden diğerinden daha geniş? Görselleştirici her alt öğe için flex-grow, flex-shrink ve flex-basis değerlerini göstererek alan dağıtım mantığını görünür kılar.
Tarayıcıyı yeniden boyutlandırın ve grid kaplamasının gerçek zamanlı olarak güncellenmesini izleyin. Grid-template-columns'un masaüstünde "1fr 1fr 1fr"den mobilde "1fr"ye nasıl değiştiğini görün ve her kesme noktasında geçişi doğrulayın.
İyi oluşturulmuş web sitelerini ziyaret edin ve üretimde Grid ve Flex düzenlerini nasıl kullandıklarını görün. Görsel kaplamalar soyut kavramları (fr birimleri, auto-fit, justify-content) somut ve etkileşimli hale getirir.
Bir sayfadaki tüm kart ızgaralarının aynı sütun sayısını ve aralık değerlerini kullandığını kontrol edin. Kaplama tutarsızlıkları anında görünür kılar — bir bölüm 20px aralık kullanırken diğeri 24px kullanıyor olması bir bakışta belirgindir.
DevSuite Pro yüzen yuvasını açın ve Grid/Flex Görselleştirici simgesine tıklayın. Araç sayfayı tarar ve tüm Grid ve Flex kapsayıcılarını algılar.
Her Grid ve Flex kapsayıcısı renkli bir kenarlık kaplaması alır. Bir panel, tüm algılanan kapsayıcıları tipleriyle (Grid veya Flex) ve öğe seçicileriyle listeler.
Tam düzen özelliklerini görmek için herhangi bir kapsayıcıya tıklayın. Grid kapsayıcıları track çizgilerini ve boyutlarını gösterir; Flex kapsayıcıları eksen yönlerini ve hizalamayı gösterir.
Her alt öğe hesaplanmış boyutunu ve düzene özgü özelliklerini (flex-grow, grid-area) görüntüler. Alanın alt öğeler arasında nasıl dağıtıldığını anlayın.
Tüm kaplamaları kaldırmak ve normal sayfa görünümüne dönmek için araç simgesine tekrar tıklayın.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 39'dan fazla geliştirici aracının kilidini açın.
