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

Külgriba + sisu CSS-i ruudustiku paigutus

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

See leht avab ruudustiku generaatori kaheveerulise üherealise paigutusega, millel on juba nimetus: 200 piksli suurune külgriba veerg paindliku sisuveeru kõrval, mis võtab ülejäänud ruumi. Mõlemad alad on reaalajas eelvaates kohe nähtavad, värvitud ja märgistatud, nii et jaotus on silmaga nähtav.

See on veebis kõige levinum navigeerimise ja sisuga kujund – seadete lehed, dokumentatsioonisaidid ja administraatori armatuurlauad toetuvad kõik fikseeritud laiusega siinile sujuva põhiala kõrval. Kuna külgriba veerg kasutab piksli väärtust ja sisu veerg 1fr, jääb külgriba laius konstantseks, samas kui sisu veerg neelab vaateava iga lisapiksli.

Nimetage kumbki ala ümber, muutke veeru laiust või lisage jaotuse kohale päise jaoks rohkem ridu – allolev CSS- ja HTML-väljund jälgib iga muudatust reaalajas. Tööriist on tasuta ja töötab täielikult teie brauseris ilma üleslaadimiseta ja kontota.

🛡️
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.