Generador de CSS Grid

Definiu les columnes i files, arrossegueu per les cel·les per col·locar els elements i copieu el CSS de la quadrícula amb l'HTML corresponent amb un sol clic.

Preajustaments
Elements
CSS
HTML
Arrossegui per la quadrícula per col·locar un element.

La seva quadrícula es crea directament al seu navegador. Cap dada que defineixi aquí es puja a BroBroGo.

PMF

Com col·loco elements a la quadrícula?

Premeu i arrossegueu per les cel·les per delimitar un rectangle; en deixar-lo anar, es convertirà en un element fill col·locat que ocuparà aquestes columnes i files. Cada element que dibuixeu rep la seva pròpia regla grid-column i grid-row al CSS i un div corresponent a l'HTML. Els elements es poden superposar, i el que es dibuixa més tard es col·loca a sobre; utilitzeu la × d'un element per eliminar-lo.

Les columnes i files poden tenir mides diferents?

Sí. Cada pista té la seva pròpia casella de mida i hi podeu escriure qualsevol valor de quadrícula: 1fr, 200px, auto, min-content o minmax(120px, 1fr). Les pistes que comparteixen la mateixa mida s'agrupen en repeat() perquè el codi resultant sigui més curt. L'espai entre columnes i entre files es defineix per separat, i es redueix a un sol gap quan coincideixen.

Què faig amb el codi generat?

Copieu el CSS i l'HTML de costat a costat. L'HTML us proporciona el contenidor amb un div per element, i el CSS defineix la quadrícula i posiciona cada element. Enganxeu tots dos al vostre projecte i obtindreu el mateix disseny que heu dibuixat aquí.

Generador de CSS Cubic BezierArrossegui els dos controladors per dissenyar una corba de transició, observi el moviment d'un punt en comparació amb un de constant i copiï el valor cubic-bezier().Generador de FlexboxConfigureu un contenidor flex i els seus elements amb controls visuals, observeu com reacciona el disseny en temps real i copieu el CSS amb un sol clic.Generador de Box ShadowArrossegui els lliscadors per dissenyar una ombra de caixa, acumuli capes per donar profunditat i copiï el CSS resultant a l'instant.Generador de degradatsCreeu un degradat lineal, radial o cònic, afegiu punts de parada de color i definiu la direcció, i després copieu el CSS amb un sol clic.Generador de Border RadiusArrodoneixi cada cantó amb lliscadors, creï gotes orgàniques amb el mode el·líptic i copiï el CSS a l'instant.Calculadora de CSS clamp()Introduïu una mida per a pantalles petites i grans i obtingueu un valor clamp() fluid que s'escala de manera suau entremig, ideal per a mides de font, farcits, marges o espais.