CSS Grid generátor

Állítsa be az oszlopokat és sorokat, húzza végig a kurzort a cellákon az elemek elhelyezéséhez, és másolja ki a grid CSS-t a hozzá tartozó HTML-lel egyetlen kattintással.

Előbeállítások
Elemek
CSS
HTML
Húzza végig az egeret a rácson egy elem elhelyezéséhez.

A rács közvetlenül a böngészőjében épül fel. Semmilyen beállítás nem kerül feltöltésre a BroBroGo szervereire.

GYIK

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.

CSS Cubic Bezier generátorHúzza a két fogantyút az átmeneti görbe formálásához, figyelje a pont mozgását a lineárissal szemben, és másolja ki a cubic-bezier() értéket.Flexbox generátorÁllítson be egy flex konténert és elemeit vizuális vezérlőkkel, kövesse az elrendezés élő változását, és másolja ki a CSS-t egyetlen kattintással.Box Shadow generátorHúzza a csúszkákat a box-shadow alakításához, halmozzon fel rétegeket a mélységért, és másolja ki azonnal a kész CSS-kódot.Színátmenet generátorHozzon létre lineáris, radiális vagy kúpos színátmenetet, adjon hozzá színpontokat, állítsa be az irányt, és másolja ki a CSS-t egyetlen kattintással.Border Radius generátorKerekítse le a sarkokat csúszkákkal, hozzon létre organikus amőba alakzatokat az elliptikus móddal, és másolja ki azonnal a CSS-kódot.CSS clamp() kalkulátorAdja meg a kis és nagy képernyőkhöz tartozó méretet, és kapjon egy folyékony clamp() értéket, amely zökkenőmentesen skálázódik a kettő között – betűméretekhez, belső és külső margókhoz vagy résekhez.