LocalToolsColección de herramientas offline para el navegador

Categoría: Desarrollo

Generador de cuadrículas CSS

Idea propia¿Falta una herramienta?

Crea un diseño grid-template y copia el CSS

Ajusta el número de columnas y filas y el espacio en una vista previa en vivo de la cuadrícula, con la opción de convertir las columnas en pistas minmax() para que se encojan antes de saltar de línea, y luego copia la declaración final del contenedor. Nada de esto sale de tu navegador.

Salida
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 12px;
}

Todo lo de esta página se procesa en tu navegador. No se sube nada.

Para qué sirve

grid-template-columns: repeat(n, 1fr) genera columnas iguales que nunca se encogen por debajo de su contenido, lo que provoca desbordamiento en pantallas estrechas. Cambiar a minmax(min, 1fr) permite que cada columna se encoja hasta un mínimo antes de que la cuadrícula busque otra forma de ajustarse, la diferencia entre un diseño que se ve bien en un teléfono y uno que no. Esta herramienta construye ambas formas a partir de los mismos controles, para que la diferencia se vea en una cuadrícula real y no solo en la declaración.

Cómo se usa

  1. Define el número de columnas y filas.
  2. Ajusta el espacio entre celdas.
  3. Activa las columnas minmax() si quieres que se encojan en pantallas estrechas, y copia el CSS.

Privacidad

Esta herramienta funciona íntegramente en tu navegador. Lo que introduces nunca se sube, se guarda ni se comparte: al cerrar la pestaña desaparece.

Preguntas frecuentes

¿La vista previa es una cuadrícula CSS real?
Sí. Las celdas numeradas se distribuyen con el grid-template-columns y grid-template-rows exactos que estás definiendo.
¿Qué cambia realmente minmax()?
Sin él, las columnas de repeat(n, 1fr) siguen siendo iguales pero nunca se encogen más allá de su contenido, así que un contenedor estrecho simplemente se desborda. minmax(min, 1fr) permite que cada columna se encoja hasta el mínimo antes de que el navegador busque otra forma de ajustarlas.
¿Se sube algo?
No. La declaración es texto construido a partir de los controles que defines, y la cuadrícula de vista previa se renderiza localmente en la página.

Volver a todas las herramientas