CSS Grid generátor

A CSS Grid generátor működése és használata

A CSS Grid generátor egy olyan vizuális eszköz, amely lehetővé teszi a CSS grid elrendezések gyors és intuitív tervezését. Az eszköz segítségével meghatározhatja az oszlopok és a sorok számát, beállíthatja azok méretét, valamint megadhatja a köztük lévő réseket. A rácson belüli elemek elhelyezéséhez egyszerűen csak végig kell húznia a kurzort a cellákon. A tervezés befejeztével az eszköz automatikusan előállítja a megfelelő CSS- és HTML-kódot, amelyet közvetlenül kimásolhat és beilleszthet a saját projektjébe.

Ez az eszköz különösen hasznos azok számára, akik:

• gyorsan szeretnének prototípust készíteni egy CSS grid elrendezéshez,
• manuális kódírás nélkül szeretnének CSS- és HTML-kódot generálni egy rácsos szerkezethez,
• vizuálisan szeretnék ellenőrizni, hogy a különböző oszlop- és sorméretek hogyan befolyásolják a rács elrendezését,
• olyan elrendezéseket szeretnének létrehozni, mint például egy oldalsávos szerkezet, fejléc és lábléc, galéria vagy vezérlőpult.

Bemeneti paraméterek és beállítások

A rács szerkezetének kialakításához a következő bemeneti értékek és lehetőségek állnak rendelkezésre:

• Oszlopok: Megadhatja az oszlopok számát, amely 1 és 12 közötti érték lehet.
• Sorok: Megadhatja a sorok számát, amely szintén 1 és 12 közötti érték lehet.
• Oszlopköz: Az oszlopok közötti távolság, amely 0 és 48px közötti érték lehet.
• Sorköz: A sorok közötti távolság, amely szintén 0 és 48px közötti érték lehet.
• Oszlopméretek: Minden egyes oszlophoz megadható bármilyen érvényes CSS grid érték, mint például az 1fr, 200px, auto, min-content vagy a minmax(120px, 1fr).
• Sorméretek: Minden egyes sorhoz megadható bármilyen érvényes CSS grid érték, például az 1fr, 200px, auto, min-content vagy a minmax(120px, 1fr).
• Elemek elhelyezése: A cellákon való átlós egérhúzással jelölhet ki egy téglalap alakú területet az elemek elhelyezéséhez.

Elrendezési szabályok és speciális esetek

A generátor használata során az alábbi szabályok és működési sajátosságok érvényesülnek:

• Elemek létrehozása: Amikor végighúzza az egeret a cellákon, majd felengedi a gombot, létrejön egy elhelyezett gyermekelem, amely lefedi a kijelölt oszlopokat és sorokat.
• Kódgenerálás: Minden egyes megrajzolt elem saját grid-column és grid-row szabályt kap a generált CSS-ben, a HTML-kódban pedig egy ennek megfelelő div elem jön létre.
• Átfedések: Az elemek átfedhetik egymást a rácson. Ha átfedés történik, a később rajzolt elem fog a korábban rajzolt elem felett (tetején) elhelyezkedni.
• Elemek törlése: Az elemek sarkában található "×" gombra kattintva az adott elem eltávolítható a rácsról. Az "Elemek törlése" opció használatával az összes elem törlődik, ami üres HTML-konténert és 0 darab elemet eredményez. Az "Elem hozzáadása" funkció pedig egy új HTML-elemet hoz létre.
• Sávok méretezése: Minden egyes sáv (oszlop vagy sor) saját méretbeviteli mezővel rendelkezik, ahová tetszőleges grid érték beírható. Ha olyan érvénytelen értéket ad meg, mint például a not-a-grid-track, a beviteli mező érvénytelen jelölést kap, de a generált CSS-kimenet megtartja az utolsó érvényes értéket.
• Kódoptimalizálás: Az azonos méretű sávok a kimeneti CSS-ben automatikusan a repeat() függvénybe vonódnak össze a rövidebb kód érdekében. Hasonlóképpen, az oszlopköz és a sorköz külön-külön állítható be, de ha a két érték megegyezik, a CSS-kódban egyetlen összevont gap tulajdonsággá alakulnak.
• Korlátok: Az eszköz legfeljebb 16 elem elhelyezését támogatja egy rácson belül.

Előbeállítások használata

A gyorsabb tervezés érdekében a CSS Grid generátor különböző előre elkészített elrendezési sablonokat (előbeállításokat) kínál:

• Oldalsáv: Klasszikus elrendezés oldalsávval.
• Fejléc és lábléc: Hagyományos weboldal-szerkezet felső és alsó sávval.
• Galéria: Ez az előbeállítás automatikusan 3 oszlopot, 2 sort és 3 elhelyezett elemet hoz létre a rácson.
• Vezérlőpult: Összetettebb, adminisztrációs felületekhez használható elrendezés.

Generált kimenetek (Outputs)

A vizuális tervezés alapján a generátor kétféle kimenetet állít elő, amelyeket könnyedén kimásolhat:

1. CSS: A generált CSS-kód tartalmazza a rács konténerének (grid container) szabályait, valamint az összes elhelyezett gyermekelem egyedi pozicionálási kódját.
2. HTML: A generált HTML-kód biztosítja a rács szülő konténerét, benne az egyes elhelyezett elemeknek megfelelő div elemekkel.

Adatvédelem és adatfeldolgozás

A rács felépítése és a kód generálása közvetlenül az Ön böngészőjében történik. Semmilyen beállítás vagy adat, amelyet az eszközben megad, nem kerül feltöltésre a BroBroGo szervereire.

---

Gyakran Ismételt Kérdések (FAQ)

Hogyan helyezhetek el elemeket a rácson?

Kattintson és húzza végig az egeret a cellákon egy téglalap kijelöléséhez – amikor elengedi, létrejön egy elhelyezett gyermekelem, amely átfogja az adott oszlopokat és sorokat. Minden megrajzolt elem saját grid-column és grid-row szabályt kap a CSS-ben, valamint egy megfelelő div elemet a HTML-ben. Az elemek átfedhetik egymást, a később rajzolt elem kerül felülre; az eltávolításhoz használja az elemen lévő × gombot.

Lehetnek az oszlopok és sorok különböző méretűek?

Igen. Minden sávnak (track) saját méretmezője van, és bármilyen rácsértéket beírhat oda – pl. 1fr, 200px, auto, min-content vagy minmax(120px, 1fr). Az azonos méretű sávok a repeat() függvénybe vonódnak össze, hogy a kimenet rövid maradjon. Az oszlopköz és sorköz külön állítható be, és egyetlen gap értékké vonódik össze, ha megegyeznek.

Mit tegyek a generált kóddal?

Másolja ki a CSS- és a HTML-kódot egymás mellé. A HTML biztosítja a konténert elemenként egy-egy div-vel, a CSS pedig meghatározza a rácsot és pozicionálja az egyes elemeket. Illessze be mindkettőt a projektjébe, és pontosan ugyanazt az elrendezést kapja, mint amit itt rajzolt.