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

Bočný panel + Rozloženie mriežky CSS obsahu

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 už pomenovaným rozložením s dvomi stĺpcami a jedným riadkom: stĺpec bočného panela s veľkosťou 200 pixlov vedľa flexibilného stĺpca obsahu, ktorý zaberá zostávajúce miesto. Obidve oblasti sú viditeľné v živom náhľade okamžite, farebné a označené, takže rozdelenie je zrejmé na prvý pohľad.

Toto je najbežnejší tvar navigácie a obsahu na webe – stránky s nastaveniami, weby s dokumentáciou a riadiace panely správcu sa opierajú o koľajnicu s pevnou šírkou vedľa tekutej hlavnej oblasti. Pretože stĺpec bočného panela používa hodnotu pixelov a stĺpec obsahu používa hodnotu 1fr, bočný panel má konštantnú šírku, zatiaľ čo stĺpec obsahu absorbuje každý ďalší pixel zobrazovanej oblasti.

Premenujte niektorú oblasť, zmeňte šírku stĺpca alebo pridajte ďalšie riadky pre hlavičku nad rozdelením – výstup CSS a HTML pod nimi sleduje každú úpravu v reálnom čase. Nástroj je bezplatný a naďalej funguje úplne vo vašom prehliadači, bez nahrávania a bez účtu.

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