Grid/Flex Visualizer otkriva svaki CSS Grid i Flexbox kontejner na web stranici i prikazuje njihovu strukturu rasporeda kao šarene prekrivače izravno na stranici. Vidite grid linije, veličine traka, gap vrijednosti, flex smjerove, osi poravnanja i veličine podređenih elemenata — sve vizualizirano bez otvaranja DevTools-a.
CSS Grid i Flexbox temelji su modernog web rasporeda, ali su po zadanoj postavci nevidljivi. Ne možete vidjeti grid linije, flex osi ni gap vrijednosti samo gledanjem stranice. DevTools preglednika nude neke grid prekrivač funkcije, ali zahtijevaju da prvo pronađete kontejner u panelu Elements, ručno omogućite prekrivač i prikazuju samo jedan kontejner odjednom. Grid/Flex Visualizer u potpunosti automatizira ovaj proces — skenira stranicu, pronalazi svaki Grid i Flex kontejner te prikazuje njihovu strukturu rasporeda kao vizualne prekrivače. Grid kontejneri prikazuju linije stupaca i redaka s označenim veličinama traka. Flex kontejneri prikazuju smjer glavne osi, poravnanje poprečne osi i način raspodjele prostora. Gap područja istaknuta su obojenim trakama koje prikazuju njihove vrijednosti u pikselima. Kliknite bilo koji kontejner kako biste vidjeli detaljan panel sa svim svojstvima rasporeda.
Grid kontejneri prikazuju obojene linije za svaki red i stupac trake. Veličine traka (1fr, auto, 200px) označene su na svakoj liniji. Gap područja istaknuta su poluprozirnim trakama koje prikazuju gap vrijednost u pikselima. Implicitne i eksplicitne trake razlikuju se punim i isprekidanim linijama.
Flex kontejneri prikazuju glavnu os kao strelicu (row, row-reverse, column, column-reverse) i poprečnu os okomitu na nju. justify-content i align-items vizualizirani su s označenim pokazateljima poravnanja koji prikazuju kako se prostor raspoređuje između podređenih elemenata.
Alat automatski skenira cijelu stranicu i pronalazi svaki element s display: grid ili display: flex (uključujući inline varijante). Broj na znački prikazuje ukupan broj otkrivenih. Nema potrebe za ručnim odabirom elemenata — svi su pronađeni i navedeni automatski.
Kliknite bilo koji kontejner kako biste vidjeli njegova potpuna svojstva rasporeda: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap i sva svojstva veličine podređenih elemenata (flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
Svaki podređeni element unutar Grid ili Flex kontejnera prikazuje svoju stvarnu veličinu prikaza, flex-grow/shrink vrijednosti i smještaj u grid area. Točno vidite koliko prostora svaki podređeni element zauzima i zašto.
Otkriva Grid i Flex kontejnere ugniježđene unutar drugih Grid/Flex kontejnera. Prekrivač prikazuje svaku razinu ugniježđenosti različitim bojama kako biste mogli vidjeti potpunu hijerarhiju rasporeda.
Je li stupac grida širi ili uži od očekivanog? Prekrivač prikazuje stvarne veličine traka (1fr razriješen na 342px, auto razriješen na 156px) kako biste točno vidjeli kako je preglednik izračunao veličine.
Zašto je jedan flex podređeni element širi od drugog? Visualizer prikazuje flex-grow, flex-shrink i flex-basis vrijednosti za svaki podređeni element, čineći logiku raspodjele prostora vidljivom.
Promijenite veličinu preglednika i gledajte kako se grid prekrivač ažurira u stvarnom vremenu. Vidite kako se grid-template-columns mijenja s "1fr 1fr 1fr" na radnoj površini na "1fr" na mobilnom uređaju i provjerite prijelaz na svakoj prijelomnoj točki.
Posjetite dobro izrađene web stranice i vidite kako koriste Grid i Flex rasporede u produkciji. Vizualni prekrivači čine apstraktne koncepte (fr units, auto-fit, justify-content) opipljivima i interaktivnima.
Provjerite koriste li svi gridi kartica na stranici isti broj stupaca i gap vrijednosti. Prekrivač čini nedosljednosti odmah vidljivima — jedan odjeljak koji koristi gap od 20px dok drugi koristi 24px odmah je uočljiv.
Otvorite plutajući dock DevSuite Pro i kliknite ikonu Grid/Flex Visualizer. Alat skenira stranicu i otkriva sve Grid i Flex kontejnere.
Svaki Grid i Flex kontejner dobiva obojeni rubni prekrivač. Panel navodi sve otkrivene kontejnere s njihovim tipom (Grid ili Flex) i selektorom elementa.
Kliknite bilo koji kontejner kako biste vidjeli njegova potpuna svojstva rasporeda. Grid kontejneri prikazuju linije i veličine traka; Flex kontejneri prikazuju smjerove osi i poravnanje.
Svaki podređeni element prikazuje svoju izračunatu veličinu i svojstva specifična za raspored (flex-grow, grid-area). Razumijte kako se prostor raspoređuje među podređenim elementima.
Kliknite ikonu alata ponovo kako biste uklonili sve prekrivače i vratili se na normalni prikaz stranice.
Instalirajte DevSuite Pro besplatno i otključajte 39+ razvojnih alata za svoj preglednik.
