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

3 egyenlő oszlopú 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, amely három egyenlő szélességű oszlopra van beállítva egy sorban, és a nevesített területek ki vannak kapcsolva – az elrendezés csak ismétlés (3, 1fr), a legrövidebb módja annak, hogy kimondja: "három oszlop, amelyek mindig egyenletesen osztják el a rendelkezésre álló szélességet".

Az egyenlő szélességű oszlopok a kártyarácsok, ártáblázatok és képgalériák igáslovai: egyetlen területet sem kell elnevezni, mert minden oszlop ugyanazt a szerepet tölti be, így az egyszerű sávméretezés világosabb, mint a rács-sablon-területek deklarációja. Adjon hozzá egy sort, és ugyanaz a három szám ismétlődik alatta, még mindig tökéletesen egyenletesen.

Növelje az oszlopok számát egy sűrűbb rács eléréséhez, vagy kapcsolja be az elnevezett területeket, ha egy későbbi oszlopnak ki kell tűnnie a többi közül – az alábbi CSS és HTML frissül abban a pillanatban, amikor ezt teszi. Minden kliens oldalon fut, így nincs mit feltölteni és nincs mire várni.

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