CSS Gridi generaator

Määrake veerud ja read, lohistage üle lahtrite elementide paigutamiseks ning kopeerige griddi CSS koos sobiva HTML-iga ühe klõpsuga.

Eelseadistused
Elemendid
CSS
HTML
Lohistage üle ruudustiku elemendi paigutamiseks.

Teie ruudustik luuakse otse teie brauseris. Midagi teie sisestatust ei laadita BroBroGo serverisse.

KKK

Kuidas paigutada elemente ruudustikule?

Vajutage ja lohistage üle lahtrite ristküliku märgistamiseks — lahtilaskmisel saab sellest paigutatud alam-element, mis hõlmab neid veerge ja ridu. Iga joonistatud element saab CSS-is oma grid-column ja grid-row reegli ning vastava div-elemendi HTML-is. Elemendid võivad kattuda ja hiljem joonistatud element jääb peale; eemaldamiseks kasutage elemendil olevat ×-märgist.

Kas veerud ja read saavad olla erineva suurusega?

Jah. Igal real ja veerul on oma suuruse väli, kuhu saate sisestada mistahes grid-väärtuse — 1fr, 200px, auto, min-content või minmax(120px, 1fr). Sama suurust jagavad read/veerud koondatakse repeat() funktsiooni sisse, et väljund jääks lühikeseks. Veergude ja ridade vahed määratakse eraldi ning need koondatakse üheks gap-väärtuseks, kui need kattuvad.

Mida teha genereeritud koodiga?

Kopeerige CSS ja HTML kõrvuti. HTML annab teile konteineri, milles on üks div iga elemendi kohta, ja CSS määratleb ruudustiku ning positsioneerib iga elemendi. Kleepige mõlemad oma projekti ja saate täpselt sama paigutuse, mille siin joonistasite.

CSS Cubic Bezier generaatorLohistage kahte pidet üleminekukõvera kujundamiseks, vaadake punkti liikumist võrdluses ühtlase liikumisega ja kopeerige cubic-bezier() väärtus.Flexboxi generaatorSeadistage flex-konteiner ja selle elemendid visuaalsete juhtnuppudega, vaadake paigutuse reageerimist reaalajas ja kopeerige CSS ühe klõpsuga.Box Shadow generaatorLohistage liugureid box-shadow kujundamiseks, lisage sügavuse saavutamiseks kihte ja kopeerige valmis CSS kohe.Gradiendi generaatorLooge lineaarseid, radiaalseid või koonilisi gradiente, lisage värvipunkte ja määrake suund ning kopeerige CSS ühe klõpsuga.Border Radiuse generaatorÜmardage iga nurka liuguritega, kujundage orgaanilisi mulle elliptilise režiimiga ja kopeerige CSS kohe.CSS clamp() kalkulaatorSisestage suurus väikeste ja suurte ekraanide jaoks ning saate sujuvalt skaleeruva clamp() väärtuse fondi suuruste, paddingute, marginite või gapide jaoks.