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

Püha Graali CSS-ruudustiku paigutus – valmiskood

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, mis on eellaaditud Püha Graali paigutusega: kolm veergu ja kolm rida, mille päis ja jalus katavad kogu laiust ning nende vahel on navigeerimis-/põhi-/kõrvalrida. Päise rida kasutab automaatset kõrgust, keskmine rida täidab ülejäänud ruumi ja kaks külgmist veergu on fikseeritud 200 pikslile, samas kui põhiveerg võtab ülejäänud osa.

Püha Graali paigutus teenis oma nime, kuna seda oli tõeliselt raske usaldusväärselt ehitada enne CSS Gridit – aastaid kestnud ujukhäkkimised, tabelipaigutused ja absoluutne positsioneerimine püüdsid seda täpset kuju võltsida. Grid-template-alade korral tõmbub see kokku viieks nimetatud piirkonnaks ja käputäieks raja suuruseks, mistõttu jääb see CSS-ruudustiku õpetamise esimeseks standardseks näiteks.

Kõik sellel lehel olevad numbrid ja lüngad on endiselt aktiivsed: kahandage külgmisi veerge, lisage neljas rida või nimetage ala ja eelvaade ning kopeeritav CSS-i värskendus kohe ümber. Kopeerige CSS- ja HTML-blokid otse oma projekti – kõik töötab teie brauseris lokaalselt, midagi ei laadita üles.

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