⭐ 0
🔍
Text Obrázok PDF a Dokumenty Audio Hudba Elektronika Čas Užitočné programy Validátory Ezoterika Hry

Rozloženie mriežky CSS svätého grálu — pripravený kód

Vizuálne navrhnite rozloženia mriežky CSS: nastavte stĺpce, riadky a medzery, potom zadajte názvy oblastí do buniek a vytvorte oblasti mriežky-šablóny – so živým náhľadom a kopírovateľnými CSS a HTML.

Zadajte názov do ľubovoľnej bunky nižšie; bunky s rovnakým názvom sa zlúčia do jednej oblasti mriežky-šablóny-oblasti.

Spracovanie... 0%

Výsledok

Táto stránka otvorí generátor mriežky s predinštalovaným rozložením svätého grálu: tri stĺpce a tri riadky, s hlavičkou a pätou po celej šírke a s navigačným/hlavným/bočným riadkom medzi nimi. Riadok hlavičky používa automatickú výšku, stredný riadok vyplní zostávajúci priestor a dva bočné stĺpce sú pevne nastavené na 200 pixelov, zatiaľ čo hlavný stĺpec zaberá zvyšok.

Rozloženie svätého grálu si vyslúžilo svoje meno, pretože bolo skutočne ťažké ho spoľahlivo zostaviť pred CSS Grid – roky plavákových hackov, rozloženia tabuliek a absolútneho umiestňovania sa snažili tento presný tvar predstierať. S oblasťami šablóny mriežky sa zrúti do piatich pomenovaných oblastí a niekoľkých veľkostí stôp, a preto zostáva štandardným prvým príkladom výučby mriežky CSS.

Každé číslo a medzera na tejto stránke sú stále aktívne: zmenšite bočné stĺpce, pridajte štvrtý riadok alebo premenujte oblasť a náhľad a kopírovateľné CSS sa okamžite aktualizujú. Skopírujte bloky CSS a HTML priamo do svojho projektu – všetko beží lokálne vo vašom prehliadači, nič sa nenahráva.

🛡️
Spustené v prehliadači

Vaše súbory a vstupy nikdy neopustia toto zariadenie. Spracovanie prebieha úplne offline. 100% bezpečné.

Prijaté formáty a pravidlá

  • Číselné vstupy pre 1–6 stĺpcov a riadkov, plus samostatné ovládacie prvky pre medzery medzi stĺpcami a riadkami, ktoré sa pri zhode skombinujú do jednej hodnoty medzery.
  • Režim pomenovaných oblastí: zadajte názov oblasti priamo do ľubovoľnej bunky aktívnej mriežky; nástroj vytvorí platný reťazec grid-template-areas a upozorní, keď názvy netvoria čisté obdĺžniky.
  • Kopírovateľný blok CSS (zobrazenie: mriežka, mriežka-šablóna-stĺpce/riadky, medzera, oblasti šablóny mriežky) plus zodpovedajúca kostra HTML s jedným prvkom div oblasti mriežky na pomenovanú oblasť.

Hlavné výhody

✓ Napíšte názov priamo do ľubovoľnej bunky a zhodné názvy sa zlúčia do jednej oblasti mriežky-šablóny-oblasti – žiadne presúvanie, žiadne ručné hádanie syntaxe v úvodzovkách.
✓ Mriežka živého náhľadu mení veľkosť a prefarbuje pri každej zmene, takže pred skopírovaním jedného riadku CSS uvidíte presné stopy stĺpcov a riadkov a každú pomenovanú oblasť.
✓ Predvoľby ako klasické rozloženie svätého grálu a úzky bočný panel vám namiesto prázdnej mriežky poskytujú skutočnú, fungujúcu deklaráciu oblastí mriežky-šablóny-oblasti.

Prípady použitia

  • • Zostavte si klasický shell stránky svätého grálu – hlavičku a pätu s plnou šírkou s navigačným/hlavným/odloženým stredným riadkom – zadaním názvov oblastí namiesto ručného písania oblastí mriežky-šablóny.
  • • Rozložte stránku s nastaveniami alebo administračný panel s bočným panelom s pevnou šírkou vedľa flexibilného stĺpca obsahu a skopírujte presné CSS a HTML, keď bude živý náhľad vyzerať správne.
  • • Pred odoslaním skontrolujte, či množina pomenovaných oblastí skutočne tvorí platné obdĺžniky – nástroj označí presné názvy, ktoré by v prehliadači porušili oblasti šablóny mriežky.