Generador de CSS Grid

El CSS Grid Generator es una herramienta en línea gratuita para diseñar visualmente layouts de CSS grid con áreas con nombre, ajustes predefinidos y salida de código en vivo para CSS, Tailwind y HTML. Funciona por completo en tu navegador, sin instalación ni registro.

Haz clic y arrastra sobre las celdas en la vista previa visual. Asigna primero el nombre del área (o déjalo en blanco para un nombre automático). La salida CSS incluye grid-template-areas y selectores de clase.

Cada columna o fila puede usar fr, px, %, auto o minmax(min, max). minmax muestra campos numéricos de mínimo/máximo para pistas adaptables.

Es lo mejor posible. Las pistas fr uniformes se asignan a grid-cols-N; las unidades mixtas recurren a valores arbitrarios como grid-cols-[200px_1fr_200px]. La salida CSS es la fuente autorizada.

Sí, el CSS Grid Generator es 100% gratis, sin registro, sin tarifas ocultas y sin límites de uso. Todo el procesamiento se realiza localmente en tu navegador, garantizando una privacidad total.

Por supuesto. El CSS Grid Generator procesa todo en el lado del cliente, dentro de tu navegador. No se sube ni se almacena ningún dato en ningún servidor. Tu contenido permanece privado en tu dispositivo en todo momento.

Sí, el CSS Grid Generator es totalmente adaptable y funciona en smartphones y tablets. Puedes usarlo en cualquier dispositivo con un navegador web moderno, sin necesidad de descargar ninguna app.

No se necesita ninguna cuenta ni registro. Simplemente abre el CSS Grid Generator en tu navegador y empieza a usarlo de inmediato. No hay muros de registro ni restricciones de uso.

El CSS Grid Generator admite una amplia gama de formatos y lenguajes populares. Consulta la interfaz de la herramienta para ver la lista completa de opciones disponibles.

El CSS Grid Generator funciona en todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y Opera. Para una mejor experiencia, usa la última versión de tu navegador preferido.

Estas tres unidades controlan cómo se dimensiona cada pista. La unidad fr representa una fracción del espacio sobrante después de colocar las pistas fijas, así que dos columnas configuradas a 1fr cada una se reparten el ancho restante por igual y se mantienen flexibles a medida que el contenedor cambia de tamaño. Un valor en px es un ancho fijo en píxeles que nunca cambia, ideal para barras laterales, rieles o encabezados que deben conservar su tamaño. Un % se mide respecto al propio ancho o alto del contenedor, así que una columna al 25% siempre ocupa una cuarta parte sin importar el contenido. Un patrón común es combinarlas, como una barra lateral fija de 250px junto a una columna principal flexible de 1fr. En este generador, cada columna y fila tiene su propio menú desplegable de unidad, así que puedes combinar fr, px, % y auto y ver cómo la vista previa y el CSS se actualizan al instante mientras experimentas.

Usa minmax() siempre que una pista necesite ajustarse entre dos límites en lugar de mantener un tamaño fijo. Toma un mínimo y un máximo, así que minmax(100px, 1fr) permite que una columna se encoja hasta no menos de 100px pero crezca para llenar el espacio sobrante cuando hay lugar disponible. Esta es la base de los layouts responsivos: una barra lateral puede mantener un mínimo legible en pantallas angostas y expandirse en pantallas anchas sin necesidad de una media query. Un px fijo es mejor solo cuando una pista no debe moverse nunca, como un riel de iconos preciso. En esta herramienta, elegir minmax en el menú desplegable de unidad de una pista revela campos numéricos dedicados para mínimo y máximo, así que defines ambos límites visualmente y el CSS generado escribe el valor minmax(min, max) correcto. Pruébalo en una columna para ver cómo la vista previa se estira y se limita al arrastrar el ancho del navegador.

Ambas posicionan elementos hijos dentro de un grid, pero se leen de forma muy distinta. La colocación basada en líneas usa números de línea de grid, así que un elemento hijo abarca grid-column: 1 / 3 y grid-row: 2 / 4, lo cual es preciso pero obliga a contar líneas y volver a contarlas cada vez que cambian las pistas. grid-template-areas, en cambio, da a los rectángulos nombres legibles para humanos como header, sidebar y main, y luego coloca un elemento hijo con un simple grid-area: header. La estructura se vuelve entendible de un vistazo y mucho más fácil de reorganizar, ya que editas el mapa con nombres en lugar de manejar números de línea. Las áreas con nombre también mantienen el marcado autodocumentado para el equipo. Este generador se apoya en las áreas: escribe un nombre, arrastra por las celdas para pintar la región, y genera el bloque grid-template-areas junto con un selector de clase para cada área, mientras te permite ajustar numéricamente los valores de inicio y fin de fila y columna cuando necesitas esa precisión.

Suenan parecido pero actúan sobre cosas distintas. justify-items alinea el contenido dentro de cada celda del grid a lo largo del eje de la fila (eje en línea), así que configurarlo en center centra cada elemento dentro de su propia celda mientras las celdas en sí permanecen en su lugar. justify-content alinea el conjunto completo de pistas dentro del contenedor del grid cuando las columnas no ocupan todo el ancho disponible, que es donde entran los valores de distribución como space-between, space-around y space-evenly para separar las columnas entre sí. La misma pareja existe en el eje de bloque como align-items frente a align-content. En resumen, las propiedades -items mueven cosas dentro de las celdas, y las propiedades -content mueven las pistas dentro del contenedor. Este generador expone las cuatro propiedades como menús desplegables junto con deslizadores independientes de gap para fila y columna, así que puedes cambiar cada una y ver de inmediato cómo se modifica el layout antes de copiar el CSS resultante.

La regla rápida son las dimensiones: Flexbox es unidimensional, ordena elementos a lo largo de una sola fila o columna, mientras que CSS Grid es bidimensional, controla filas y columnas al mismo tiempo. Recurre a Flexbox cuando tengas una línea de elementos que deba envolver o distribuirse a lo largo de un solo eje, como una barra de navegación, un grupo de botones o etiquetas. Recurre a Grid cuando necesites una estructura real de página o componente donde los elementos deban alinearse en ambos ejes, como un dashboard con encabezado, barra lateral, contenido principal y pie de página. No son rivales y a menudo se anidan: un Grid define el esqueleto general de la página, y Flexbox organiza el contenido dentro de una celda individual. Como la sintaxis de Grid es densa y fácil de equivocar sutilmente, este generador te permite construir la estructura bidimensional visualmente, pintar áreas con nombre y copiar CSS, Tailwind o HTML limpio directamente en tu proyecto.