Grid/Flex Visualiseerija tuvastab iga CSS Grid ja Flexbox konteineri veebilehel ning renderdab nende paigutuse struktuuri värvikate kihistustena otse lehel. Vaata ruudustiku jooni, raja suurusi, lünkade väärtusi, flex suundi, joonduse teljeid ja allele elemendi suurust — kõik visualiseeritud ilma DevToolsi avamata.
CSS Grid ja Flexbox on kaasaegse veebi paigutuse alused, kuid need on vaikimisi nähtamatud. Lihtsalt lehte vaadates pole võimalik näha ruudustiku jooni, flex teljeid ega lünkade väärtusi. Brauseri DevTools pakub mõningaid ruudustiku kihistuse funktsioone, kuid need nõuavad elemendipaneelil konteineri leidmist, kihistuse käsitsi lubamist ja näitavad korraga ainult ühte konteinerit. Grid/Flex Visualiseerija automatiseerib selle täielikult — see skannib lehe, leiab kõik Grid ja Flex konteinerid ning renderdab nende paigutuse struktuuri visuaalsete kihistustena. Ruudustiku konteinerid näitavad veeru- ja reajooneid, mille rajasuurused on märgistatud. Flex konteinerid näitavad peatelje suunda, risttelje joondust ja kuidas ruum jaotatakse. Lüngad on esile tõstetud värviliste ribadega, mis näitavad nende pikslite väärtusi. Klõpsa mis tahes konteineril, et näha üksikasjalikku omaduste paneeli iga paigutuse omadusega.
Ruudustiku konteinerid näitavad värvitud jooni iga rea ja veeru raja jaoks. Rajasuurused (1fr, auto, 200px) on märgistatud igal joonel. Lünkade alad on esile tõstetud poollabipaistvate ribadega, mis näitavad lünkade väärtust pikslites. Kaudsed ja selgesõnalised rajad eristatakse täisjoonte vs kriipsjoonete abil.
Flex konteinerid näitavad peatelge noolena (rida, rida-vastupidine, veerg, veerg-vastupidine) ja risttelge risti sellega. justify-content ja align-items visualiseeritakse märgistatud joondusindikaatoritega, mis näitavad, kuidas ruum jaotatakse laste vahel.
Tööriist skannib automaatselt kogu lehe ja leiab iga elemendi, millel on display: grid või display: flex (sh inline variandid). Märgise loend näitab tuvastatud koguarvu. Pole vaja elemente käsitsi valida — kõik leitakse ja loetletakse automaatselt.
Klõpsa mis tahes konteineril, et näha selle täielikke paigutuse omadusi: grid-template-columns/rows, grid-gap, flex-direction, justify-content, align-items, flex-wrap ja kõik lapse suuruse omadused (flex-grow, flex-shrink, flex-basis, grid-column, grid-row).
Iga lapse element Grid või Flex konteineris näitab oma tegelikku renderdatud suurust, flex-grow/shrink väärtusi ja ruudustiku ala paigutust. Vaata täpselt, kui palju ruumi iga laps hõivab ja miks.
Tuvastab Grid ja Flex konteinereid, mis on pesastatud teiste Grid/Flex konteinerite sees. Kihistus renderdab iga pesastamise taseme erinevate värvidega, et saaksid näha täielikku paigutuse hierarhiat.
Ruudustiku veerg on oodatust laiem või kitsam? Kihistus näitab tegelikke raja suurusi (1fr lahendatud 342px-ks, auto lahendatud 156px-ks), et saaksid täpselt näha, kuidas brauser suurused arvutas.
Miks on üks flex laps laiem kui teine? Visualiseerija näitab flex-grow, flex-shrink ja flex-basis väärtusi iga lapse jaoks, muutes ruumi jaotuse loogika nähtavaks.
Muuda brauseri suurust ja vaata ruudustiku kihistuse reaalajas uuenemist. Vaata, kuidas grid-template-columns muutub "1fr 1fr 1fr"-st lauaarvutil "1fr"-ks mobiilil, ja kontrolli üleminekut igal murdepunktil.
Külasta hästi ehitatud veebisaite ja vaata, kuidas nad kasutavad Grid ja Flex paigutusi tootmises. Visuaalsed kihistused muudavad abstraktsed kontseptsioonid (fr ühikud, auto-fit, justify-content) käegakatsutavaks ja interaktiivseks.
Kontrolli, et kõik kaardi ruudustikud lehel kasutavad sama veergude arvu ja lünkade väärtusi. Kihistus muudab ebajärjepidevused kohe nähtavaks — üks sektsioon, mis kasutab 20px lünka, samas kui teine kasutab 24px, on esmapilgul ilmne.
Ava DevSuite Pro ujuv dokk ja klõpsa Grid/Flex Visualiseerija ikoonil. Tööriist skannib lehe ja tuvastab kõik Grid ja Flex konteinerid.
Iga Grid ja Flex konteiner saab värvitud ääriste kihistuse. Paneel loetleb kõik tuvastatud konteinerid nende tüübiga (Grid või Flex) ja elemendi selektoriga.
Klõpsa mis tahes konteineril, et näha selle täielikke paigutuse omadusi. Ruudustiku konteinerid näitavad raja jooni ja suurusi; Flex konteinerid näitavad telje suundi ja joondust.
Iga lapse element kuvab oma arvutatud suuruse ja paigutuspõhised omadused (flex-grow, grid-area). Mõista, kuidas ruum jaotatakse laste vahel.
Klõpsa tööriista ikoonil uuesti, et eemaldada kõik kihistused ja naasta tavalisele lehe vaatele.
Paigaldage DevSuite Pro tasuta ja avage 39+ arendustööriista oma brauserile.
