CSS Grid Generátor
Tervezz CSS Grid elrendezéseket vizuálisan: állítsd be az oszlopokat, sorokat és a hézagot, majd gépeld be a területneveket a cellákba, hogy felépítsd a grid-template-areas-t — élő előnézettel és másolható CSS-sel és HTML-lel.
🔒 Teljesen a böngészőjében dolgozzák fel – soha semmi, amit itt beírt, nem kerül feltöltésre.
Eredmény
A grid-template-areas deklaráció a CSS egyik legolvashatóbb része, de csak akkor, ha már létezik — kézzel megalkotni azt jelenti, hogy idézőjeles karakterláncokat számolgatunk és ügyelünk a sorhosszakra, és egyetlen rosszul beírt cella hangtalanul tönkreteszi az egész elrendezést. Ez a generátor ezt közvetlen alakítássá változtatja: állítsd be az oszlop- és sorok számát, gépelj nevet az élő rács bármely cellájába, és az azonos nevek automatikusan egy elnevezett régióvá olvadnak össze.
A színfalak mögött minden üresen hagyott cella ponttá válik a generált grid-template-areas karakterláncban, és minden elnevezett cella az adott név téglalapjának részévé válik. A CSS csak azt engedi, hogy egy elnevezett régió egyetlen szabályos téglalapot foglaljon el, így az eszköz gépelés közben ellenőrzi ezt, és pontosan jelzi, ha egy név még nem alkot érvényes téglalapot — ahelyett, hogy hallgatólagosan olyan CSS-t állítana elő, amit a böngésző elutasít.
Az oszlop- és sorhézag alapértelmezetten 8px, és azonos érték esetén egyetlen gap sorrá vonódnak össze, az élő előnézeti rács pedig mindig tükrözi a grid-template-columns és grid-template-rows sávokat, beleértve az előre beállított elrendezésekből származó fix pixeles oszlopokat is, mint a szent grál 200 pixeles oldalsó sávjai. A másolható kimenet mindkét oldalt lefedi: egy CSS blokk, amely készen áll a stíluslapodba, és egy hozzá illő HTML váz, elnevezett területenként egy-egy grid-area divvel.
A Grid és a Flexbox más-más elrendezési problémákra valók, és az oldalon található css-flexbox-generator jobb kiindulópont az egydimenziós elrendezésekhez — például navigációs sávokhoz vagy kártyakötegekhez, amelyek egyetlen sor vagy oszlop rugalmas elemeiből állnak. Válaszd ezt a grid generátort, amikor kétdimenziós vezérlésre, explicit sorokra és oszlopokra, vagy elnevezett régiókra, például fejléc/navigáció/főtartalom/lábléc van szükséged; a két eszköz gyakran ugyanazon az oldalon köt ki, a grid a lap vázához, a flexbox a darabjain belül. Mint az oldal minden eszköze, ez is teljes egészében a böngésződben fut — nincs feltöltés, nincs fiók.