CSS Grid Generator
Tervezze meg a CSS-rács elrendezését vizuálisan: állítson be oszlopokat, sorokat és hézagokat, majd írja be a területneveket a cellákba, hogy rács-sablon-területeket építsen fel – élő előnézettel, másolható CSS- és HTML-kóddal.
Eredmény
A rács-sablon-területek deklarációja a CSS egyik legolvashatóbb része, de csak akkor, ha létezik – kézzel történő elérése azt jelenti, hogy megszámolja az idézőjelben szereplő karakterláncokat és a sorhosszakat, és egy nem egyező cella csendben megtöri az egész elrendezést. Ez a generátor ezt közvetlen manipulációvá alakítja át: állítsa be az oszlop- és sorszámot, írjon be egy nevet az élő rács bármelyik cellájába, és a megfelelő nevek automatikusan egy elnevezett régióba egyesülnek.
A motorháztető alatt minden üresen hagyott cella ponttá válik a generált rács-sablon-területek karakterláncban, és minden elnevezett cella a név téglalapjának részévé válik. A CSS csak azt engedi meg, hogy egy elnevezett régió egy tiszta téglalap alakú blokkot foglaljon el, így az eszköz ezt ellenőrzi gépelés közben, és pontosan megmondja, ha egy név még nem alkot érvényes téglalapot – ahelyett, hogy csendesen állítaná elő a CSS-t, a böngésző elutasítja.
Az oszlophézag és a sorköz alapértelmezés szerint 8 képpont, és egyetlen résvonalban egyesül, amikor megfelelnek, az élő előnézeti rács pedig mindig tükrözi a rács-sablon-oszlopokat és a rács-sablon-sorokat, beleértve a rögzített pixeloszlopokat olyan előre beállított értékekből, mint a Szent Grál 200 képpontos oldalsó sínje. A másolható kimenet mindkét oldalt lefedi: egy CSS-blokkot, amely készen áll a stíluslaphoz, és egy megfelelő HTML-vázat egy rácsterület div-vel megnevezett régiónként.
A rács és a flexbox különböző elrendezési problémákat old meg, és az ezen az oldalon található css-flexbox-generátor a jobb kiindulópont az egydimenziós elrendezésekhez – rugalmas elemek egyetlen sora vagy oszlopa, például navigációs sáv vagy kártyaköteg. Ehelyett használja ezt a rácsgenerátort, ha kétdimenziós vezérlésre, explicit sorokra és oszlopokra vagy elnevezett régiókra van szüksége, például fejléc/nav/fő/lábléc; a két eszköz gyakran ugyanarra az oldalra kerül, az oldalhéj rácsára és a részein belüli flexboxra. Mint minden eszköz ezen a webhelyen, ez is teljes mértékben az Ön böngészőjében fut – nincs feltöltés, nincs fiók.