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

3 võrdse veeruga CSS-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, mis on seatud kolmele võrdse laiusega veerule ühes reas, kusjuures nimelised alad on välja lülitatud – paigutus on lihtsalt kordus (3, 1fr), mis on lühim viis öelda "kolm veergu, mis jagavad saadaoleva laiuse alati ühtlaselt."

Võrdse laiusega veerud on kaardiruuduste, hinnakujundustabelite ja pildigaleriide tööhobune: ükski piirkond ei vaja nime panemist, kuna iga veerg täidab sama rolli, nii et tavaline raja suurus on selgem kui ruudustiku-malli alade deklaratsioon. Lisage rida ja samad kolm rada korduvad selle all, ikka täiesti ühtlaselt.

Suurendage veergude arvu tihedama ruudustiku jaoks või lülitage sisse nimelised alad, kui hilisem veerg peab teistest silma paistma – allolevaid CSS-i ja HTML-i värskendatakse samal hetkel, kui seda teete. Kõik töötab kliendi poolel, seega pole midagi üles laadida ega midagi oodata.

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