⭐ 0
🔍
Tekst Pilt PDF ja dokumendid Heli Muusika Elektroonika Aeg Kommunaalteenused Validaatorid Esoteeriline Mängud

CSS Grid Generaator

Kujunda CSS Grid küljendusi visuaalselt: määra veerud, read ja vahe, seejärel trüki alade nimed lahtritesse, et luua grid-template-areas — koos reaalajas eelvaate ning kopeeritava CSS-i ja HTML-iga.

🔒 Töödeldud täielikult teie brauseris – midagi, mida siia sisestate, ei laadita kunagi üles.

Sisesta nimi mis tahes allolevasse lahtrisse; sama nimega lahtrid ühendatakse üheks grid-template-areas piirkonnaks.

Töötlen... 0%

Tulemus

Grid-template-areas deklaratsioon on üks loetavamaid CSS-i osi, aga alles siis, kui see on olemas — käsitsi sinna jõudmine tähendab jutumärkidega sõnede kokkulugemist ja ridade pikkuste sobitamist ning üks mittevastav lahter lõhub vaikselt kogu küljenduse. See generaator muudab selle otseseks manipuleerimiseks: määra veergude ja ridade arv, trüki nimi lahtrisse reaalajas ruudustikus ja ühtivad nimed liidetakse automaatselt üheks nimeliseks piirkonnaks.

Kulisside taga muutub iga tühjaks jäetud lahter punktiks loodud grid-template-areas sõnes ja iga nimega lahter saab selle nime ristküliku osaks. CSS lubab nimelisel piirkonnal hõivata ainult ühe puhta ristkülikukujulise ploki, nii et tööriist kontrollib seda trükkimise ajal ja ütleb sulle täpselt, kui nimi ei moodusta veel korrektset ristkülikut — selle asemel, et vaikselt toota CSS-i, mille brauser tagasi lükkab.

Veeruvahe ja reavahe algväärtus on 8px ning ühinevad üheks gap reaks, kui need kattuvad, ning reaalajas eelvaate ruudustik peegeldab alati sinu grid-template-columns ja grid-template-rows radu, kaasa arvatud fikseeritud piksliga veerud eelseadistusest nagu püha graali 200px küljerööpad. Kopeeritav väljund katab mõlemad pooled: CSS-plokk, mis on valmis sinu stiililehe jaoks, ja sobiv HTML-skelett koos ühe grid-area div-iga iga nimelise piirkonna jaoks.

Grid ja flexbox lahendavad erinevaid küljendusprobleeme ning selle saidi css-flexbox-generator on parem lähtepunkt ühemõõtmelistele küljendustele — üks rida või veerg paindlikest elementidest nagu navigeerimisriba või kaartide virn. Kasuta seda ruudustiku generaatorit, kui vajad kahemõõtmelist kontrolli, selgeid ridu ja veerge või nimelisi piirkondi nagu päis/navigeerimine/põhisisu/jalus; need kaks tööriista satuvad sageli samale lehele, grid lehekülje kesta jaoks ja flexbox selle tükkide sees. Nagu iga tööriist sellel saidil, töötab see täielikult sinu brauseris — üleslaadimist pole, kontot pole.

Meeldib see tööriist? Arvad, et see toode on kasulik? Näed selles potentsiaali ja soovid seda toetada?

🛡️
Käivitatakse brauseris

Sinu failid ja sisestused ei lahku sellest seadmest. Töötlus toimub täiesti võrguühenduseta. 100% turvaline.

Aktsepteeritud formaadid ja reeglid

  • Numbriväljad 1–6 veeru ja rea jaoks, lisaks eraldi veeruvahe ja reavahe juhtelemendid, mis ühtivad üheks gap väärtuseks, kui need kattuvad.
  • Nimeliste alade režiim: trüki ala nimi otse reaalajas ruudustiku lahtrisse; tööriist koostab korrektse grid-template-areas sõne ja hoiatab, kui nimed ei moodusta puhast ristkülikukuju.
  • Kopeeritav CSS-plokk (display: grid, grid-template-columns/rows, gap, grid-template-areas) ja sobiv HTML-skelett koos ühe grid-area div-iga iga nimelise piirkonna jaoks.

Peamised eelised

✓ Kirjuta nimi otse lahtrisse ja ühtivad nimed ühendatakse automaatselt üheks grid-template-areas piirkonnaks — pole vaja lohistada ega jutumärkide süntaksit käsitsi kokku lugeda.
✓ Reaalajas eelvaate ruudustik muudab iga muudatuse järel suurust ja värvi, nii et näed täpselt veergude, ridade ja nimeliste alade paigutust enne esimese CSS-i rea kopeerimist.
✓ Eelseadistused nagu klassikaline püha graali küljendus ja kitsas külgriba annavad sulle tõeliselt töötava grid-template-areas deklaratsiooni lähtepunktiks, mitte tühja ruudustiku.

Kasutusjuhud

  • • Kujunda klassikaline püha graali leheküljeruudustik – täislaiusega päis ja jalus koos nav/sisu/külg keskmise reaga – tippides alade nimesid, selle asemel et kirjutada grid-template-areas käsitsi.
  • • Paiguta seadete leht või halduspaneel fikseeritud laiusega külgriba ja paindliku sisuveeruga ning kopeeri täpne CSS ja HTML, kui eelvaade näeb õige välja.
  • • Kontrolli, et nimetatud alade komplekt moodustab enne avaldamist tegelikud kehtivad ristkülikud – tööriist märgib täpsed nimed, mis rikuksid grid-template-areas brauseris.