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

Rozvržení mřížky CSS Svatý grál — připravený kód

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 předinstalovaným rozložením svatého grálu: tři sloupce a tři řádky, se záhlavím a zápatím po celé šířce a řádkem navigace/hlavní/postranní mezi nimi. Řádek záhlaví používá automatickou výšku, prostřední řádek vyplní zbývající prostor a dva boční sloupce jsou pevně nastaveny na 200 pixelů, zatímco hlavní sloupec zabírá zbytek.

The holy grail layout earned its name because it was genuinely hard to build reliably before CSS Grid — years of float hacks, table layouts and absolute positioning tried to fake this exact shape. S oblastmi mřížky-šablony se sbalí do pěti pojmenovaných oblastí a několika velikostí stop, což je důvod, proč zůstává standardním prvním příkladem pro výuku CSS Grid.

Každé číslo a mezera na této stránce je stále aktivní: zmenšete boční sloupce, přidejte čtvrtý řádek nebo přejmenujte oblast a náhled a kopírovatelné CSS se okamžitě aktualizují. Zkopírujte bloky CSS a HTML přímo do svého projektu – vše běží lokálně ve vašem prohlížeči, nic se nenahrává.

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