⭐ 0
🔍
Texto Imagen PDF y Docs Audio Música Electrónica Tiempo Utilidades Validadores Esoterismo Juegos

Diseño de cuadrícula CSS de 3 columnas iguales

Diseñe diseños de cuadrícula CSS visualmente: establezca columnas, filas y espacios, luego escriba nombres de áreas en celdas para crear áreas de plantilla de cuadrícula, con una vista previa en vivo y CSS y HTML copiables.

Escriba un nombre en cualquier celda a continuación; las celdas con el mismo nombre se fusionan en una región de áreas de plantilla de cuadrícula.

Procesando... 0%

Resultado

Esta página abre el generador de cuadrícula configurado en tres columnas de igual ancho en una sola fila, con las áreas con nombre desactivadas; el diseño es simplemente repetir (3, 1fr), la forma más corta de decir "tres columnas que siempre dividen el ancho disponible de manera uniforme".

Las columnas de igual ancho son el caballo de batalla de las cuadrículas de tarjetas, tablas de precios y galerías de imágenes: no es necesario nombrar ningún área porque cada columna desempeña el mismo papel, por lo que el tamaño simple de las pistas es más claro que una declaración de áreas de plantilla de cuadrícula. Agrega una fila y las mismas tres pistas se repiten debajo, aún perfectamente uniformes.

Aumente el número de columnas para obtener una cuadrícula más densa o active áreas con nombre si una columna posterior necesita destacarse del resto: el CSS y HTML a continuación se actualizan en el momento en que lo hace. Todo se ejecuta en el lado del cliente, por lo que no hay nada que cargar ni nada que esperar.

🛡️
Ejecutado en el navegador

Tus archivos y datos nunca salen de este dispositivo. El procesamiento se realiza completamente sin conexión. 100% seguro.

Formatos y reglas aceptados

  • Entradas numéricas para 1 a 6 columnas y filas, además de controles separados de espacio entre columnas y filas que se combinan en un valor de espacio cuando coinciden.
  • Un modo de áreas con nombre: escriba el nombre de un área directamente en cualquier celda de la cuadrícula en vivo; la herramienta crea una cadena válida de áreas de plantilla de cuadrícula y advierte cuando los nombres no forman rectángulos limpios.
  • Bloque CSS copiable (visualización: cuadrícula, columnas/filas de plantilla de cuadrícula, espacio, áreas de plantilla de cuadrícula) más un esqueleto HTML coincidente con un div de área de cuadrícula por región nombrada.

Beneficios clave

✓ Escriba un nombre directamente en cualquier celda y los nombres coincidentes se fusionarán en una región de áreas de plantilla de cuadrícula, sin necesidad de arrastrar la selección ni de adivinar la sintaxis de la cadena entre comillas a mano.
✓ La cuadrícula de vista previa en vivo cambia de tamaño y color con cada cambio, para que pueda ver las pistas exactas de columnas y filas y cada región con nombre antes de copiar una sola línea de CSS.
✓ Los ajustes preestablecidos como el diseño clásico del Santo Grial y una barra lateral estrecha le brindan una declaración real y funcional de áreas de plantilla de cuadrícula para comenzar en lugar de una cuadrícula en blanco.

Casos de uso

  • • Cree el clásico shell de página del Santo Grial (encabezado y pie de página de ancho completo con una fila central de navegación/principal/aparte) escribiendo nombres de áreas en lugar de escribir a mano áreas de plantilla de cuadrícula.
  • • Diseñe una página de configuración o un panel de administración con una barra lateral de ancho fijo junto a una columna de contenido flexible y copie el CSS y HTML exactos una vez que la vista previa en vivo se vea bien.
  • • Verifique que un conjunto de áreas con nombre realmente forme rectángulos válidos antes del envío: la herramienta marca los nombres exactos que romperían las áreas de plantilla de cuadrícula en el navegador.