CSS Grid: Building Modern Layouts
"CSS Grid is the most powerful layout system available in CSS. Unlike Flexbox, which is designed for one-dimensional layouts (a single row or column), Grid is designed for two-dimensional layouts—managing both rows and columns at the same time."
The Two-Dimensional King
To start using CSS Grid, you must define a container element as a grid with display: grid. Once established, all direct children of that container become grid items.
Unlike older methods (like floats) or even Flexbox, Grid allows you to explicitly define tracks (rows and columns). A key superpower is the fr unit, which represents a fraction of the available free space.
Drawing Layouts: Grid Template Areas
Perhaps the most intuitive feature of CSS Grid is grid-template-areas. It literally lets you visually block out your layout using strings of text.
You assign a name to each element using grid-area: myName;, and then arrange those names in the parent container. This is a game-changer for making broad layout adjustments in media queries without touching the HTML.
Responsive Magic without Media Queries
By combining the repeat() function, the auto-fit keyword, and the minmax() function, you can create fully responsive grids that adapt to screen sizes automatically—no media queries required!
❓ Frequently Asked Questions
¿Grid o Flexbox? ¿Cuál debo usar?
[Image comparing CSS Flexbox 1D layout vs CSS Grid 2D layout]
Flexbox es de 1 Dimensión. Es ideal para alinear elementos en una fila (como una barra de navegación) o una columna (como una lista vertical), y distribuir espacio dentro de un contenedor.
Grid es de 2 Dimensiones. Es ideal para el esqueleto o layout principal de la página, donde necesitas controlar posiciones exactas tanto horizontal como verticalmente. Pro Tip: ¡Usa Grid para el layout principal y Flexbox para los componentes internos!
¿Cuál es la diferencia entre auto-fit y auto-fill?
Ambos crean tantas columnas como quepan en el contenedor. Sin embargo, cuando hay espacio extra (sobrante):
- auto-fill: Llena el espacio con columnas vacías (invisibles), respetando el tamaño establecido en minmax.
- auto-fit: "Colapsa" las columnas vacías a 0px y expande los elementos existentes para llenar todo el ancho disponible. (Este es el que se usa el 90% de las veces).
¿Qué hace exactamente minmax(100px, 1fr)?
Es una función defensiva. Le dice al navegador: "Haz que esta columna tenga al menos 100px de ancho. Si hay espacio extra en el contenedor, déjala crecer ocupando las fracciones (1fr) disponibles equitativamente."