Funcionament del Generador de CSS Grid
El Generador de CSS Grid és una eina visual dissenyada per estructurar quadrícules bidimensionals de manera intuïtiva. Permet definir el nombre de columnes i files, especificar-ne les mides individuals i determinar els espais de separació entre pistes. Mitjançant l'acció d'arrossegar el cursor sobre les cel·les de la interfície, es delimiten les àrees on es col·loquen els elements fills. L'eina tradueix automàticament aquesta distribució visual en codi CSS i HTML optimitzat, a punt per ser copiat i integrat en qualsevol projecte web.
Paràmetres de configuració i límits d'entrada
Per construir l'estructura de la quadrícula, l'usuari disposa dels següents controls numèrics i camps de text:
- Columnes: Un valor numèric enter comprès entre 1 i 12.
- Files: Un valor numèric enter comprès entre 1 i 12.
- Espai entre columnes: Una distància configurable entre 0 i 48px.
- Espai entre files: Una distància configurable entre 0 i 48px.
- Mides de columna i fila: Camps de text on s'accepta qualsevol unitat o funció vàlida de CSS Grid, com ara
1fr,200px,auto,min-contento expressions complexes comminmax(120px, 1fr). - Col·locació d'elements: Acció d'arrossegar el punter a través de les cel·les per definir una àrea rectangular.
L'aplicació admet un màxim de 16 elements col·locats simultàniament sobre la quadrícula. Si s'introdueix un valor no vàlid (com per exemple not-a-grid-track) en el camp de mida d'una pista, el camp es marca visualment com a no vàlid, però el codi CSS generat manté l'últim valor correcte que s'hagi registrat.
Generació de codi i comportament de la interfície
El comportament de l'editor visual i la generació de codi es regeixen per les següents regles tècniques:
- Creació d'elements: En prémer i arrossegar a través de les cel·les, el sistema detecta l'àrea coberta. En deixar anar el botó del ratolí, es crea un element fill que ocupa les columnes i files seleccionades. Cada element rep les seves regles de posicionament
grid-columnigrid-rowal CSS, i es genera un nodedivequivalent a l'HTML. - Superposició: Els elements es poden solapar dins de la mateixa quadrícula. L'element que es dibuixa en darrer lloc es posiciona visualment a sobre dels anteriors. Cada element disposa d'un botó "×" per eliminar-lo de manera individual.
- Optimització de regles CSS: Si diverses pistes consecutives o alternes comparteixen exactament la mateixa mida, l'eina simplifica la declaració utilitzant la funció
repeat()al codi de sortida. - Fusió de propietats d'espaiat: L'espai entre columnes i l'espai entre files es defineixen de manera independent. No obstant això, si ambdós valors coincideixen, el codi CSS resultant els unifica en una única propietat abreujada
gap. - Neteja i addició manual: L'acció "Netejar elements" buida completament el contenidor HTML i restableix el comptador a 0 elements. L'acció "Afegir element" genera un nou element HTML dins de l'estructura.
Preajustaments de disseny disponibles
L'eina inclou configuracions predefinides per agilitzar la creació d'estructures comunes de disseny web:
- Barra lateral
- Capçalera i peu de pàgina
- Galeria: genera 3 columnes, 2 files i 3 elements
- Tauler de control
Privadesa i processament de dades
La creació i el càlcul de la quadrícula es realitzen localment. Tot el processament de les dades i la generació del codi HTML i CSS s'executen directament al navegador de l'usuari. Cap dels paràmetres, mides o estructures que es defineixen en aquesta eina es puja a servidors externs.
Preguntes freqüents (FAQ)
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í.