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

3 stejné sloupce Rozvržení mřížky CSS

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 nastavený na tři sloupce stejné šířky v jednom řádku s vypnutými pojmenovanými oblastmi – rozložení je jen repeat(3, 1fr), nejkratší způsob, jak říci „tři sloupce, které vždy rovnoměrně rozdělí dostupnou šířku“.

Sloupce o stejné šířce jsou tahounem mřížek karet, cenových tabulek a galerií obrázků: žádná oblast nepotřebuje pojmenování, protože každý sloupec hraje stejnou roli, takže velikost prosté stopy je jasnější než deklarace oblastí mřížky-šablony-oblasti. Přidejte řádek a stejné tři stopy opakujte pod ním, stále dokonale rovnoměrné.

Zvyšte počet sloupců pro hustší mřížku nebo zapněte pojmenované oblasti, pokud se pozdější sloupec potřebuje odlišit od ostatních – CSS a HTML níže se aktualizují ve chvíli, kdy to uděláte. Vše běží na straně klienta, takže není co nahrávat a na co čekat.

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