Generador de CSS Grid

Cómo funciona

La pestaña de grid arma listas de pistas a partir de tus cuentas y tamaños: tres columnas 1fr se convierten en grid-template-columns: repeat(3, 1fr), el shorthand que se expande a una fracción del espacio libre por columna. auto ajusta la pista a su contenido, y un valor fijo en px reserva exactamente ese ancho — una receta común es una pista fija para la barra lateral más una pista fluida 1fr. Si quieres una pista que se estire con límites, edita a mano la salida hacia minmax(80px, 1fr); este constructor lo deja fuera del shorthand a propósito para que el CSS generado siga siendo legible.

La unidad fr

Un fr es una porción del espacio que queda tras restar pistas de tamaño fijo, huecos y padding — espacio libre, no un porcentaje. La distinción importa: con una barra lateral de 200px, gap de 16px y dos columnas 1fr, cada fr recibe (ancho − 216px) ÷ 2. Dos pistas a 2fr 1fr reparten el mismo resto 2:1, y un fr nunca desborda como pueden hacer los porcentajes cuando olvidas los huecos.

Reglas de nombre de grid-template-areas

Cada cadena entre comillas es una fila; cada token es una celda, y los tokens deben cuadrar en cantidad entre filas. Un área nombrada debe formar un rectángulo perfecto — una región en L es inválida y, sinceramente, el navegador descarta toda la declaración grid-template-areas cuando cualquier nombre rompe la regla, así que la línea de aviso de arriba no es decorativa. Las celdas vacías usan el punto. Una vez pintada, cada elemento puede agarrar un área por nombre en vez de contar líneas start/end.

Pistas implícitas vs explícitas

Tú declaras la cuadrícula explícita — las pistas de grid-template-columns y -rows. El contenido más allá (más elementos que celdas, o un grid de áreas con elementos sin asignar) crea pistas implícitas fuera de la plantilla, dimensionadas por grid-auto-columns/-rows, que valen auto por defecto. Por eso una demo que parece tener filas misteriosas extra normalmente solo desbordó la cuadrícula explícita.

Preguntas frecuentes