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

CSS-võrgu generaator

Kujundage CSS-i ruudustiku paigutusi visuaalselt: määrake veerud, read ja lüngad, seejärel tippige lahtritesse alade nimed, et luua ruudustiku-mallialasid – reaalajas eelvaate ning kopeeritava CSS-i ja HTML-iga.

Tippige nimi mis tahes allolevasse lahtrisse; samanimelised lahtrid liidetakse üheks ruudustiku-malli-alade piirkonda.

Töötlemine... 0%

Tulemus

Ruudustiku-malli alade deklaratsioon on üks loetavamaid CSS-i osi, mis olemas on, kuid ainult siis, kui see on olemas – käsitsi jõudmine tähendab tsiteeritud stringide loendamist ja ridade pikkuste sobitamist ning üks mittevastav lahter rikub vaikselt kogu paigutuse. See generaator muudab selle otseseks manipuleerimiseks: määrake veergude ja ridade arv, tippige nimi reaalajas ruudustiku mis tahes lahtrisse ja sobivad nimed liidetakse automaatselt ühte nimega piirkonda.

Kapoti all muutub iga tühjaks jäetud lahter punktiks genereeritud ruudustiku-malli alade stringis ja iga lahter, mille nimetate, muutub selle nime ristküliku osaks. CSS võimaldab nimega piirkonnal hõivata ainult ühe puhta ristkülikukujulise ploki, nii et tööriist kontrollib seda tippimise ajal ja ütleb teile täpselt, millal nimi ei moodusta veel kehtivat ristkülikut – CSS-i vaikselt loomise asemel lükkab brauser tagasi.

Veeruvahe ja reavahe on vaikimisi 8 pikslit ja need ühendatakse üheks vahejooneks, kui need ühtivad, ning reaalajas eelvaate ruudustik peegeldab alati teie ruudustiku-malli- ja ruudustiku-malli-ridade radasid, sealhulgas fikseeritud pikslite veerge eelseadistustest, nagu Püha Graali 200 piksli külgmised siinid. Kopeeritav väljund katab mõlemad pooled: CSS-plokk, mis on teie stiilitabeli jaoks valmis, ja sobiv HTML-skelett, millel on üks ruudustikuala div nimega piirkonna kohta.

Ruudustik ja flexbox lahendavad erinevaid paigutusprobleeme ning sellel saidil olev css-flexbox-generaator on parem lähtepunkt ühemõõtmeliste paigutuste jaoks – paindlike üksuste üks rida või veerg, nagu navigeerimisriba või kaardivirn. Kui vajate kahemõõtmelist juhtimist, selgesõnalisi ridu ja veerge või nimega piirkondi, näiteks päis/nav/peamine/jalus, kasutage selle ruudustiku generaatorit. need kaks tööriista satuvad sageli samale lehele, lehe kesta ruudustikule ja flexboxile selle tükkide sees. Nagu kõik sellel saidil olevad tööriistad, töötab see täielikult teie brauseris – pole üleslaadimist ega kontot.

🛡️
Teostatud brauseris

Teie failid ja sisendid ei lahku sellest seadmest kunagi. Töötlemine toimub täiesti võrguühenduseta. 100% turvaline.

Aktsepteeritud vormingud ja reeglid

  • Numbrisisendid 1–6 veeru ja rea jaoks ning eraldi veeruvahe ja reavahe juhtnupud, mis kattudes kombineeritakse üheks lünklikuks väärtuseks.
  • Nimega alade režiim: tippige piirkonna nimi otse reaalajas ruudustiku mis tahes lahtrisse; tööriist koostab kehtiva grid-template-areas stringi ja hoiatab, kui nimed ei moodusta puhtaid ristkülikuid.
  • Kopeeritav CSS-i plokk (kuva: ruudustik, ruudustiku malli veerud/read, vahe, ruudustiku malli alad) pluss sobiv HTML-skelett, millel on üks ruudustikuala div nimega piirkonna kohta.

Peamised eelised

✓ Sisestage nimi otse mis tahes lahtrisse ja vastavad nimed liidetakse üheks ruudustiku-malli alade piirkonnaks – ei mingit lohistamist ega tsiteeritud stringi süntaksi käsitsi arvamist.
✓ Reaalajas eelvaate ruudustik muudab iga muudatuse suurust ja värvi, nii et näete enne ühe CSS-i rea kopeerimist täpseid veergude ja ridade rada ning iga nimega piirkonda.
✓ Eelseaded, nagu klassikaline Püha Graali paigutus ja kitsas külgriba, annavad tühja ruudustiku asemel tõelise toimiva ruudustiku-malli alade deklaratsiooni.

Kasutusjuhtumid

  • • Ehitage klassikaline Püha Graali lehe kest – täislaiuses päis ja jalus koos navigeerimis-/põhi-/kõrvaleaga –, tippides ruudustiku-malli alade käsitsi kirjutamise asemel piirkondade nimed.
  • • Paigutage paindliku sisuveeru kõrvale seadete leht või administraatori armatuurlaud fikseeritud laiusega külgribaga ja kopeerige täpne CSS ja HTML, kui reaalajas eelvaade tundub õige.
  • • Enne tarnimist kontrollige, kas nimega alade komplekt moodustab tegelikult kehtivad ristkülikud – tööriist märgib täpsed nimed, mis rikuksid brauseris ruudustiku-malli alasid.