CSS rács generátor
Szöveg alapú vázlatból valódi CSS grid kódot készíthet, elnevezett terület-definíciókkal.
CSS rács generátor
Illesszen be egy lap-elrendezés durva vázlatát, és ez az eszköz működő CSS grid kódra alakítja. Írja meg az elrendezés minden sorát külön sorba, és ismételje meg ugyanazt a szót a cellák között egy elnevezett régió jelölésére — a „header header" egy sorban, a „nav main" a következőben, a „footer footer" az utolsóban az osztályikus három soros elrendezést írja le teljes szélességű fejléccel és lábléccsel. Az eszköz felismeri az ismételt neveket mint rács-terület definiálásokat, és automatikusan létrehozza a megfelelő grid-template-areas deklarációt.
Az opciók szabályozzák a többi generált CSS-t. Állítsa be a cellák közötti távolságot pixelben, és opcionálisan adjon meg kifejezett oszlop- vagy sormagasságokat bármilyen érvényes CSS nyomkövetési méret felhasználásával — fr egységek, auto vagy minmax(); hagyja üresen bármelyik mezőt, és az eszköz egyenletes helyezést biztosít helyette. Kapcsolja be a terület-specifikus szabályokat, hogy az összes elnevezett szakaszhoz kész grid-area deklaráció jöjjön létre, az Ön által választott osztálynév-előtaggal, így a „header" azonnal .grid-header lesz. A reszponzív beállítás hozzáad egy max-width média-lekérdezést, amely szűk képernyőkön az egész elrendezést egyetlen oszlopra csukja össze, és a HTML beállítás egy megfelelő jelölés-vázlatot fűz hozzá, hogy az szerkezet mellett megláthatja a CSS-t.
Ha két azonos nevű cella nem képez szilárd téglalapot — L alak vagy olyan név, amely kihagyja a cellát — a valódi CSS grid nem tudja helyesen megjeleníteni ezt a területet, ezért az eszköz közvetlenül a kimenetben figyelmeztetési megjegyzésként jelzi, ahelyett hogy csendesen érvénytelen szabályokat generálna. A bármilyen operációs rendszerről származó sortörések ugyanúgy kezelhetők, és az eredmény alatt megjelenő élő számláló nyomon követi az előállított CSS elrendezési sorainak, elnevezett terület-definícióinak és karaktereinek számát.
Minden helyileg fut a böngészőjében; a vázlat és az Ön által kapott CSS kód soha nem kerül sehová. Másolja ki az eredményt, töltse le .txt fájlként, vagy küldje el közvetlenül egy másik eszközbe, például a CSS formázóba a behúzás további finomításához.