⭐ 0
🔍
Szöveg Kép PDF és Dokumentumok Hang Zene Elektronika Idő Segédprogramok Validátorok Ezotéria Játékok

Oldalsáv + Tartalom CSS rács elrendezés

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.

Írjon be egy nevet az alábbi cellákba; Az azonos nevű cellák egyetlen rács-sablon-területek régióba egyesülnek.

Feldolgozás... 0%

Eredmény

Ez az oldal megnyitja a rácsgenerátort egy már elnevezett kétoszlopos, egysoros elrendezéssel: egy 200 képpontos oldalsávoszlop egy rugalmas tartalomoszlop mellett, amely a fennmaradó helyet foglalja el. Mindkét terület azonnal látható az élő előnézetben, színezve és felcímkézve, így a felosztás egy pillantásra nyilvánvaló.

Ez a legelterjedtebb navigációs és tartalomforma az interneten – a beállítási oldalak, a dokumentációs oldalak és az adminisztrátori irányítópultok mind egy fix szélességű sínre támaszkodnak egy rugalmas főterület mellett. Mivel az oldalsáv oszlop pixelértéket, a tartalom oszlop pedig 1fr értéket használ, az oldalsáv állandó szélességben marad, míg a tartalom oszlop elnyeli a nézetablak minden extra képpontját.

Nevezze át bármelyik területet, módosítsa az oszlop szélességét, vagy adjon hozzá további sorokat a fejléchez a felosztás felett – az alábbi CSS- és HTML-kimenet minden módosítást valós időben követ. Az eszköz ingyenes, és teljes egészében a böngészőjében működik, feltöltés és fiók nélkül.

🛡️
Böngészőben futtatva

A fájljaid és bemeneteid soha nem hagyják el ezt az eszközt. A feldolgozás teljesen offline módon történik. 100% biztonságos.

Elfogadott formátumok és szabályok

  • Számbevitel 1–6 oszlophoz és sorhoz, valamint külön oszlop- és sorköz-vezérlők, amelyek egy hézagértékké egyesülnek, ha illeszkednek.
  • Elnevezett területek mód: írjon be egy területnevet közvetlenül az élő rács bármely cellájába; az eszköz érvényes grid-template-areas karakterláncot épít fel, és figyelmeztet, ha a nevek nem alkotnak tiszta téglalapokat.
  • Másolható CSS-blokk (megjelenítés: rács, grid-sablon-oszlopok/sorok, hézag, grid-sablon-területek), valamint egy megfelelő HTML-váz, egy rácsterület-div-vel megnevezett régiónként.

Főbb előnyök

✓ Írjon be egy nevet közvetlenül bármelyik cellába, és az egyező nevek egy rács-sablon-területrégióba egyesülnek – nincs húzással történő kijelölés, nem kell kézzel kitalálni az idézőjeles karakterlánc szintaxisát.
✓ Az élő előnézeti rács minden változtatáskor átméretezi és színezi, így a CSS egyetlen sorának másolása előtt láthatja a pontos oszlop- és sorsávot, valamint minden megnevezett régiót.
✓ Az olyan előre beállított értékek, mint a klasszikus Szent Grál elrendezés és a keskeny oldalsáv, valódi, működő rács-sablon-területek deklarációt adnak az üres rács helyett.

Felhasználási területek

  • • Készítse el a klasszikus Holy Grail oldalhéjat – teljes szélességű fejléc és lábléc navigációs/fő/oldalsó középső sorral – úgy, hogy a területneveket gépelje be a rács-sablon-területek kézi írása helyett.
  • • Helyezzen el egy beállítási oldalt vagy adminisztrátori irányítópultot fix szélességű oldalsávval egy rugalmas tartalomoszlop mellett, és másolja ki a pontos CSS-t és HTML-t, ha az élő előnézet megfelelőnek tűnik.
  • • Szállítás előtt ellenőrizze, hogy a megnevezett területek valóban érvényes téglalapokat alkotnak-e – az eszköz pontosan azokat a neveket jelöli meg, amelyek megszakítanák a rács-sablon-területeket a böngészőben.