CSS Grid/Flexbox

Nivel Principiante

Imagina que tienes que ordenar fotos en una pared. Flexbox es como si usaras una sola fila o columna para poner tus fotos en línea, y luego las ajustas para que se vean bien, ya sea centrando el espacio entre ellas o poniéndolas todas pegadas a un lado. CSS Grid es como si tuvieras un tablero de ajedrez gigante: puedes poner tus fotos en cualquier cuadro, fila o columna, y crear diseños más complejos y organizados.

Nivel Intermedio

CSS Grid y Flexbox son dos de los modelos de layout más poderosos de CSS para construir la estructura y el diseño de un sitio web. Aunque a menudo se usan juntos, tienen propósitos diferentes:

Flexbox (Flexible Box Layout): Es ideal para el diseño unidimensional, es decir, para alinear elementos en una sola fila o columna. Es perfecto para crear menús de navegación, centrar elementos verticalmente o distribuir espacio entre ítems de forma dinámica. Flexbox se encarga de la alineación y la distribución del espacio en un solo eje.
CSS Grid (Grid Layout): Es ideal para el diseño bidimensional. Permite crear un sistema de cuadrícula con filas y columnas, similar a una tabla, pero mucho más flexible y potente. Con Grid, puedes colocar elementos en cualquier celda de la cuadrícula, creando layouts de página completos y complejos con facilidad.

La principal diferencia radica en su enfoque: Flexbox es para distribuir y alinear contenido dentro de un contenedor en una sola dirección, mientras que Grid es para crear diseños de página completos en dos dimensiones.

Nivel Avanzado

Técnicamente, CSS Grid y Flexbox son módulos de CSS3 que proporcionan un control granular sobre la disposición de los elementos en una página.

Flexbox se basa en el concepto de eje principal y eje cruzado. Los contenedores se definen con display: flex; y los elementos hijos (flex items) se controlan con propiedades como flex-grow, flex-shrink y flex-basis. El alineamiento y la distribución se gestionan con propiedades como justify-content (en el eje principal) y align-items (en el eje cruzado). Su naturaleza unidimensional lo hace perfecto para componentes de la interfaz de usuario.
CSS Grid se define con display: grid; y permite a los desarrolladores crear una cuadrícula explícita o implícita. Las filas y columnas se definen con propiedades como grid-template-rows y grid-template-columns. Los elementos hijos se colocan en la cuadrícula usando las propiedades grid-row, grid-column o la forma abreviada grid-area. Una de sus características más poderosas es la capacidad de crear cuadrículas responsivas con la unidad fr (fracción) y funciones como minmax() y repeat(), que se ajustan automáticamente al espacio disponible.

La combinación de ambos es una práctica común. Por ejemplo, se puede usar CSS Grid para el layout general de la página (la estructura de cabecera, contenido, barra lateral y pie de página), y luego usar Flexbox dentro de cada una de esas secciones para alinear los elementos de manera más precisa. Esta sinergia permite crear diseños complejos, robustos y adaptables (responsive) con un código más limpio y declarativo que los métodos anteriores, como los floats y el posicionamiento.

« Volver al índice del glosario