Generador de CSS Grid
Ajusta grid-template-columns/rows, justify-items, align-items y gap con una interfaz gráfica interactiva y previsualiza diseños reales de CSS Grid en tiempo real. Copia el CSS generado con un clic.
Consejos de uso
- La unidad fr en grid-template-columns: repeat(3, 1fr) representa una fracción del espacio restante, por lo que la proporción de las columnas se mantiene aunque cambie el ancho de la ventana.
- La propiedad gap solo afecta al espacio entre filas y columnas, a diferencia de margin, que también afecta al exterior de la cuadrícula. También puedes definir row-gap y column-gap por separado.
- Las pistas configuradas como "auto" se ajustan al tamaño real de su contenido, lo cual es útil para columnas o filas cuyo contenido tiene una longitud impredecible.
- Al sobrescribir grid-column: span 2 en un solo elemento, puedes hacer que solo la cabecera o el pie de página ocupen todo el ancho de la cuadrícula.
- Usa Grid cuando necesites un diseño bidimensional completo, y Flexbox cuando baste con una sola fila o columna de elementos (consulta también nuestro generador de CSS Flexbox).
Preguntas frecuentes
A propósito — La "segunda dimensión" que CSS Grid persigue y Flexbox no cubre
CSS Grid Layout se diseñó como un sistema de diseño bidimensional que permite definir filas y columnas al mismo tiempo, a diferencia de Flexbox, que se centra en organizar elementos en una sola dirección. Su estandarización en el W3C comenzó alrededor de 2011, y cuando Chrome, Firefox, Safari y Edge implementaron su soporte de forma casi simultánea en 2017, su adopción en proyectos reales se aceleró rápidamente.
Antes de que existiera Grid, organizar una página con la clásica estructura "holy grail" —cabecera, barra lateral, contenido principal y pie de página— requería soluciones complicadas basadas en float o etiquetas de tabla. CSS Grid introdujo propiedades declarativas como grid-template-columns, grid-template-rows y grid-template-areas que permiten recrear este diseño familiar con solo unas pocas líneas de CSS.
Hoy en día, gran parte del trabajo de diseño detrás de los paneles de control, las galerías de imágenes y los diseños al estilo de revista que giran en torno a filas y columnas se construye con CSS Grid. El soporte para "subgrid", que permite que una cuadrícula anidada herede el tamaño de las pistas de su elemento padre, también se ha extendido en los principales navegadores, facilitando mantener la coherencia en diseños complejos de varios niveles.
En la práctica, se ha consolidado la convención de que Grid se encargue de la estructura general de la página y Flexbox de la disposición de los elementos dentro de cada componente. Ambos no son tecnologías rivales, sino herramientas complementarias, cada una especializada en una fortaleza distinta (alineación unidimensional frente a distribución bidimensional en cuadrícula), y combinarlas dentro de una misma página se considera una práctica estándar.