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

Postranní panel + Rozvržení mřížky CSS obsahu

Vizuálně navrhujte rozvržení mřížky CSS: nastavte sloupce, řádky a mezery, poté zadejte názvy oblastí do buněk a vytvořte oblasti mřížky-šablony – s živým náhledem a kopírovatelnými CSS a HTML.

Zadejte název do libovolné buňky níže; buňky se stejným názvem se sloučí do jedné oblasti mřížky-šablony-oblasti.

Zpracování... 0%

Výsledek

Tato stránka otevře generátor mřížky s již pojmenovaným rozvržením se dvěma sloupci a jedním řádkem: sloupec postranního panelu o velikosti 200 pixelů vedle sloupce s flexibilním obsahem, který zabírá zbývající místo. Obě oblasti jsou v živém náhledu okamžitě viditelné, barevné a označené, takže rozdělení je zřejmé na první pohled.

Toto je nejběžnější tvar navigace a obsahu na webu – stránky s nastavením, weby s dokumentací a řídicí panely pro správu, to vše se opírá o kolejnici s pevnou šířkou vedle plynulé hlavní oblasti. Protože sloupec postranního panelu používá hodnotu pixelu a sloupec obsahu používá hodnotu 1fr, postranní panel si zachovává konstantní šířku, zatímco sloupec obsahu pohlcuje každý pixel navíc ve zobrazovací oblasti.

Přejmenujte kteroukoli oblast, změňte šířku sloupce nebo přidejte další řádky pro záhlaví nad rozdělením – výstup CSS a HTML níže sleduje každou úpravu v reálném čase. Tento nástroj je zdarma a funguje zcela ve vašem prohlížeči, bez nahrávání a bez účtu.

🛡️
Spuštěno v prohlížeči

Vaše soubory a vstupy nikdy neopustí toto zařízení. Zpracování probíhá zcela offline. 100% bezpečné.

Přijaté formáty a pravidla

  • Číselné vstupy pro 1–6 sloupců a řádků plus samostatné ovládací prvky pro mezeru mezi sloupci a řádky, které se při shodě spojí do jedné hodnoty mezery.
  • Režim pojmenovaných oblastí: zadejte název oblasti přímo do libovolné buňky živé mřížky; nástroj vytvoří platný řetězec grid-template-areas a varuje, když názvy netvoří čisté obdélníky.
  • Kopírovatelný blok CSS (zobrazení: mřížka, mřížka-šablona-sloupce/řádky, mezera, mřížka-šablona-oblasti) plus odpovídající kostra HTML s jednou mřížkou div na pojmenovanou oblast.

Hlavní výhody

✓ Zadejte název přímo do libovolné buňky a odpovídající názvy se sloučí do jedné oblasti mřížky-šablony-oblasti – žádné přetahování, žádné ruční hádání syntaxe uvozovek.
✓ Mřížka živého náhledu mění velikost a přebarvuje při každé změně, takže před zkopírováním jediného řádku CSS uvidíte přesné stopy sloupců a řádků a každou pojmenovanou oblast.
✓ Přednastavení, jako je klasické rozvržení svatého grálu a úzký postranní panel, vám namísto prázdné mřížky poskytují skutečnou, fungující deklaraci oblastí mřížky-šablony-oblastí.

Případy použití

  • • Vytvořte si klasický shell stránky svatého grálu – záhlaví a zápatí s plnou šířkou s prostředním řádkem nav/main/aside – zadáním názvů oblastí namísto ručního psaní oblastí mřížky-šablony.
  • • Rozložte stránku nastavení nebo administrační panel s postranním panelem s pevnou šířkou vedle flexibilního sloupce obsahu a zkopírujte přesné CSS a HTML, jakmile bude živý náhled vypadat správně.
  • • Před odesláním zkontrolujte, zda sada pojmenovaných oblastí skutečně tvoří platné obdélníky – nástroj označí přesné názvy, které by v prohlížeči porušily oblasti šablony mřížky.