Durante años, mi instinto cuando un diseño requería un diseño bidimensional real fue alcanzar una pila de contenedores flexibles anidados. Una fila de cartas dentro de una columna dentro de otra fila, cada una flexionándose, cada una luchando contra las demás por el espacio. Funcionó, en el sentido de que los píxeles finalmente aterrizaron donde quería, pero nunca fue la herramienta adecuada, y cada vez que tuve que cambiar el diseño pagué por el atajo. CSS Grid se creó exactamente para esto, y el día que dejé de evitarlo, mi código de diseño se acortó y mi marcado se volvió más plano.
Lo que me mantuvo alejado de la cuadrícula durante demasiado tiempo fue la sintaxis. grid-template-columns: repeat(3, minmax(0, 1fr)) no es una frase que se salga de los dedos, y la relación entre las pistas que declaras y las cajas que aparecen no es obvia hasta que la has visto suceder unas cuantas docenas de veces. Esa brecha entre " Sé lo que quiero " y "Conozco la propiedad que lo produce " es exactamente lo que cierra un generador.
los Generador de red CSS le permite configurar el número de columnas y filas, elegir un tamaño para cada eje, marcar los espacios y ajustar la alineación, todo mientras una vista previa en vivo se vuelve a mostrar frente a usted. El CSS exacto que produce lo que ves se encuentra en un cuadro listo para copiar debajo. Convierte la cuadrícula de una especificación que debes memorizar en un diseño que construyes haciendo clic.
TL;Dr: CSS Grid es un modelo de diseño bidimensional que controla filas y columnas al mismo tiempo. El contenedor lo impulsa
grid-template-columns,grid-template-rows,gap, y las cuatro justifican y alinean propiedades. Este generador los expone todos, muestra una vista previa en vivo y emite CSS limpio que utilizarepeat()y elfrunidad. Debido a que la vista previa se representa con las mismas declaraciones que genera, lo que ve es exactamente lo que pega. Se ejecuta completamente en su navegador sin registrarse.
¿qué problema resuelve un generador de red CSS?
La dificultad con CSS Grid no es que sea complicado. Es que es abstracto. Describes una estructura (" tres columnas iguales con un poco de espacio entre ellas") y el navegador calcula la geometría. Esa dirección indirecta es el punto completo, porque es lo que hace que las cuadrículas respondan sin una sola consulta con los medios. Pero la dirección indirecta es difícil de mantener en la cabeza. No puedes mirar repeat(3, 1fr) y sienta instantáneamente el resultado de la misma manera que puede ver una cuadrícula de cajas renderizadas.
Un generador colapsa el bucle de escritura, guardado y actualización en una sola interacción. Cambias el recuento de columnas y tres cuadros se convierten en cuatro. Cambias una pista de 1fr para auto y la columna se ajusta al ancho de su contenido. Levantas el espacio y las cajas respiran. Después de diez minutos de esto, la unidad de fracción deja de ser un símbolo que traduzcas y se convierte en algo a lo que puedes acceder a propósito. Y cuando terminas de explorar, no te queda una nota para transcribir, porque el CSS que funciona ya está escrito para ti en el cuadro de salida.
Hay un segundo beneficio más silencioso. Construir el diseño mediante manipulación obliga a la herramienta a emitir sólo CSS válido y bien formado. No se puede producir una rotura grid-template-columns valor al hacer clic, el resultado siempre es algo que puedes pegar con confianza. Esa confiabilidad es la razón por la que mantengo un conjunto de creadores visuales de CSS cerca en lugar de escribir cada regla desde cero.
¿qué propiedades controla el contenedor de la red?
CSS Grid, al igual que flexbox, divide la responsabilidad entre el contenedor y sus elementos. El contenedor define las pistas y la estructura general, y ahí es donde viven la mayoría de las decisiones de diseño, por lo que es donde se enfoca el generador. Esto es lo que hace cada propiedad de contenedor.
| Propiedad | Lo que controla | Valores comunes |
|---|---|---|
grid-template-columns |
El número y tamaño de las columnas | repeat(3, 1fr), 200px 1fr, auto |
grid-template-rows |
El número y tamaño de las filas | repeat(2, auto), 100px, 1fr |
gap |
Espacio entre pistas | cualquier longitud, por ejemplo 16px investigaciones operacionales 20px 10px |
justify-items |
Posición del artículo a lo largo del eje de la fila | stretch, start, center, end |
align-items |
Posición del artículo a lo largo del eje de la columna | stretch, start, center, end |
justify-content |
Posición de la vía cuando la rejilla es más estrecha que su contenedor, en el eje de la fila | start, center, space-between |
align-content |
Posición de la vía en el eje de la columna | start, center, space-between |
El modelo mental que hace este palo es la distinción entre las pistas y los elementos. grid-template-columns y grid-template-rows defina las vías, que son los carriles vacíos de la cuadrícula. El espacio se encuentra entre esos carriles. El justify-items y align-items luego, las propiedades colocan cada elemento dentro de la celda que ocupa, mientras justify-content y align-content coloque todo el conjunto de pistas dentro del contenedor cuando haya espacio libre. El generador mantiene estos dos niveles visualmente separados para que puedas sentir la diferencia entre mover un elemento dentro de su celda y mover toda la cuadrícula dentro de la página.
¿qué significa la unidad fr?
los fr la unidad es la pieza de CSS Grid que paga por todo el modelo y vale la pena entenderla en lugar de copiarla. Uno fr representa una fracción del espacio libre en el contenedor de la cuadrícula después de restar los tamaños y espacios fijos. Si escribes grid-template-columns: 1fr 1fr 1fr, el contenedor 's el ancho disponible se divide en tres partes iguales. Escribir 2fr 1fr 1fr y la primera columna ocupa la mitad del espacio mientras que las otras dos dividen el resto. El navegador recalcula esas fracciones en cada cambio de tamaño, razón por la cual una cuadrícula basada en fracciones es fluida sin puntos de interrupción.
Este es el comportamiento que hace que la cuadrícula sea superior a los porcentajes para la mayoría de los diseños. Un conjunto de 33.33% las columnas ignoran el espacio y se desbordan, porque los porcentajes más los espacios suman más que el contenedor. Las unidades fraccionarias se calculan después de eliminar los espacios repeat(3, 1fr) con un espacio siempre encaja. El generador por defecto es 1fr columnas exactamente por esta razón, y puedes ver tres columnas iguales manteniendo sus proporciones mientras cambias el espacio. Si desea una columna que abrace su contenido, cámbiela a auto, min-content, o max-content y vea la diferencia de inmediato.
¿Cómo hago un diseño de tres columnas?
Esta es una de las cosas más comunes que la gente construye con cuadrícula y la receta tiene dos líneas. Coloque el contenedor en display: grid y dáselo grid-template-columns: repeat(3, 1fr). Eso produce tres columnas iguales que fluyen en tantas filas como el contenido necesite. Agregar un gap y tienes un diseño de tarjeta.
En el generador, configura el recuento de columnas en tres y deja el tamaño activado 1fr, y la vista previa presenta una cuadrícula de celdas iguales. El cuadro de salida muestra:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 16px;
}
La razón por la que vale la pena construir esto haciendo clic en lugar de escribir es que los diseños reales nunca están tan limpios. Querrá que la barra lateral tenga un ancho fijo y que el contenido se flexione, o que la primera fila sea más alta que el resto. Cada uno de esos cambios es un control en el generador y un valor editado en la salida, y verá el efecto antes de comprometerlo en una hoja de estilo. Si todavía estás decidiendo entre la cuadrícula y un enfoque basado en flexiones para un bloque en particular, el generador flexbox es la herramienta complementaria, y la comparación más adelante en esta guía explica cuándo gana cada uno.
¿cuándo debo usar grid sobre flexbox?
Esta es la pregunta que más importa una vez que conoces ambos modelos, y la respuesta honesta es que depende del número de dimensiones que tenga el diseño. Flexbox es unidimensional. Organiza elementos a lo largo de un solo eje, una fila o una columna, y los envuelve si lo preguntas. La cuadrícula es bidimensional. Controla filas y columnas juntas, de modo que un elemento se puede colocar tanto en su fila como en su columna a la vez.
La regla práctica que uso es esta. Si estoy trazando un conjunto de cosas en una línea, una barra de navegación, una fila de etiquetas, una barra de herramientas, una pila de campos de formulario, es decir, flexbox. Si estoy trazando una estructura con filas y columnas que necesitan alinearse entre sí, un shell de página con un encabezado, barra lateral y área de contenido, o una galería donde cada tarjeta se asienta en una línea de cuadrícula limpia, es decir, cuadrícula. Los dos no son rivales; una celda de cuadrícula a menudo contiene un contenedor flexible y un elemento flexible suele ser una cuadrícula pequeña. Aquí está la división como tabla.
| Pregunta | Caja flexible | Cuadrícula CSS |
|---|---|---|
| dimensiones | Un eje a la vez | Filas y columnas juntas |
| mejor para | Barras de herramientas, navegación, filas de artículos, etiquetas envolventes | Diseños de páginas, galerías, paneles, formularios |
| Tamaño impulsado por | Contenido, luego distribución | La plantilla de seguimiento que declaras |
| Alineación | justify-content, align-items |
Mismo plus justify-items, align-content |
| Uso Típico | Dentro de una celda de cuadrícula | El marco general de la página o sección |
El generador hace que esto sea concreto porque puedes construir el mismo resultado visual en ambos sentidos y ver cuál produce la regla más limpia. Para una galería de cartas iguales, cuadrícula con repeat() tiene dos líneas y flex es un recipiente para envolver con anchos en cada niño. Para una sola fila que necesita extender sus artículos hasta los bordes, flexione con space-between es el camino más corto.
¿cuál es la diferencia entre brecha, justificar contenido y alinear contenido?
Estos tres a menudo se confunden porque todos tratan del espacio, pero operan en diferentes niveles. El gap la propiedad establece el espacio fijo entre pistas y es el que utilizará en casi todas las cuadrículas. Un único valor espacia filas y columnas por igual; dos valores establecen el espacio entre filas y columnas por separado, en el orden fila y luego columna. El generador le permite configurar los dos espacios de forma independiente y emite la taquigrafía solo cuando difieren, por lo que la salida permanece tan corta como lo permite la situación.
justify-content y align-content, por el contrario, solo haga cualquier cosa cuando las pistas grid's sean más pequeñas que el contenedor, dejando espacio libre para distribuir. Si todas sus columnas tienen anchos de píxeles fijos y no llenan el contenedor, justify-content: center centrará todo el bloque de vías, y space-between los empujará hasta los bordes. Con fr columnas que ya llenan el ancho, estas propiedades no tienen nada que distribuir y parecen no hacer nada, lo cual es una fuente común de confusión. El generador los omite de la salida cuando se dejan por defecto start, entonces cada línea de la regla copiada tiene un efecto visible. Ese hábito de emitir sólo declaraciones significativas es el mismo en el que confío generador de gradiente y el generador de sombras de caja, porque una regla llena de líneas no operativas es una regla en la que no puedes confiar de un vistazo.
¿Cómo mantiene honesta la vista previa el generador?
La trampa con cualquier creador visual es que la vista previa y el código exportado pueden separarse. Una herramienta que representa su vista previa de una manera y genera su código de otra es peor que inútil, porque le enseña un diseño que no se reproducirá. Este generador evita eso creando tanto la vista previa como el CSS copiado a partir de una única lista de declaraciones. La misma función que decide qué propiedades emitir es la que diseña los cuadros de vista previa, por lo que lo que ve es exactamente lo que pega. No existe una ruta de renderizado separada que pueda estar en desacuerdo.
Esa elección de diseño es la razón por la que se utiliza el resultado repeat() para cualquier eje con más de una vía. Se emite una sola vía como tamaño desnudo, pero dos o más colapsan repeat(n, size), que es a la vez lo que escribiría un humano y lo que mantiene la regla legible a medida que crece el recuento. Es una cosa pequeña, pero es la diferencia entre la salida que enviarías y la salida que reescribirías.
Construyendo una cuadrícula de tarjetas responsiva, paso a paso
Aquí hay un flujo de trabajo que uso con frecuencia. Comience con el recuento de columnas en tres y el tamaño activado 1fr. Ahora tienes tres columnas fluidas iguales. Establezca el tamaño de la fila en auto entonces, cada fila crece para adaptarse a su carta más alta. Eleve el espacio a algo cómodo, alrededor de veinte píxeles para las cartas. Se trata de una cuadrícula de cartas completa y responsiva, y la salida es de cuatro líneas.
Para que funcione por sí solo sin consultas con los medios, el siguiente paso en un proyecto real es intercambiarlo repeat(3, 1fr) en repeat(auto-fill, minmax(240px, 1fr)), que le indica al navegador que instale tantas columnas de 240 píxeles como pueda y las estire para llenarlas. El generador te proporciona el punto de partida de recuento fijo; esa edición la convierte en una cuadrícula de autoenvoltura. Comprender el punto de partida es lo que hace que la edición sea obvia, y ese es el argumento completo para aprender el diseño construyéndola en lugar de pegarla. El caso más amplio para ensamblar un conjunto de herramientas que funcionen de esta manera está en la pieza del Kit de herramientas para desarrolladores web, y los hábitos de flujo de trabajo detrás de esto están en el Herramientas de productividad para desarrolladores guía.
¿qué navegadores admiten CSS Grid?
CSS Grid es compatible con todos los navegadores actuales y lo ha sido durante años. Las propiedades que emite este generador son estándar y sin prefijo, por lo que la salida funciona en Chrome, Firefox, Safari y Edge sin prefijos de proveedor ni alternativas para ningún navegador al que un proyecto se dirige de manera realista en la actualidad. El gap la propiedad en contenedores de red, que fue la última pieza que aterrizó ampliamente, ahora también cuenta con soporte universal. Eso significa que el CSS que copia está listo para producción tal como está escrito, lo que no siempre fue cierto en los primeros años de la red y es una de las razones por las que el modelo finalmente es la opción predeterminada en lugar de una mejora progresiva. Para las reglas subyacentes, la especificación de nivel 1 del módulo de diseño de cuadrícula CSS del W3C es la fuente principal, y vale la pena leerla una vez que el generador le haya dado la intuición de seguirla.
Si está creando un conjunto de herramientas visuales más amplio junto con esto, el generador de radio de borde y Generador de abrazaderas CSS complete el conjunto y el Guía de herramientas de codificación recoge los que más busco.
Preguntas frecuentes
¿qué es un generador de red CSS?
Un generador de cuadrícula CSS es una herramienta visual que crea código de diseño de cuadrícula CSS a partir de las configuraciones que elija. Selecciona columnas, filas, tamaños de pistas, espacios y alineación, y genera el CSS de plantilla de cuadrícula junto con una vista previa en vivo del resultado.
¿qué significa la unidad fr en CSS Grid?
La unidad fr representa una fracción del espacio libre en el contenedor de la cuadrícula. grid-template-columns: repeat(3, 1fr) crea tres columnas, cada una de las cuales toma una parte igual del ancho disponible y refluye a medida que cambia el tamaño del contenedor.
¿cuál es la diferencia entre CSS Grid y flexbox?
CSS Grid es un modelo bidimensional que controla filas y columnas juntas, ideal para diseños de páginas y cuadrículas de tarjetas. Flexbox es unidimensional y coloca elementos a lo largo de un solo eje, ideal para barras de herramientas y filas. Son complementarios y a menudo se usan juntos.
¿cómo hago una cuadrícula responsiva?
Utilice unidades fr para que las pistas compartan el ancho disponible y combine repetir () con minmax () y autocompletar o ajustar automáticamente para rejillas que se envuelven por sí solas. Este generador emite repetición () con pistas fr como punto de partida que puedes extender.
¿cuál es la propiedad de brecha en CSS Grid?
el espacio establece el espacio entre las pistas de la cuadrícula. Un único valor espacia ambas filas y columnas por igual; dos valores establecen el espacio entre filas y columnas por separado, en el orden entre filas y luego entre columnas.
¿es seguro utilizar el CSS de red generado en producción?
Sí. CSS Grid es compatible con todos los navegadores modernos y la herramienta emite propiedades estándar sin prefijo. Todo el procesamiento ocurre en su navegador, por lo que no se carga nada y la herramienta funciona sin conexión una vez cargada.
¿funciona el generador de red CSS en dispositivos móviles?
Sí. La herramienta responde completamente y funciona en cualquier navegador moderno en teléfonos, tabletas y escritorios. El CSS generado es idéntico independientemente del dispositivo en el que lo construya.
¿este generador de red CSS es gratuito?
Sí. Es completamente gratuito, sin registro, sin marcas de agua ni límites de uso. El CSS de red que produce es suyo para usarlo en cualquier proyecto.
