𝗖𝗦𝗦 𝗚𝗿𝗶𝗱 𝘃𝘀 𝗙𝗹𝗲𝘅𝗯𝗼𝘅
Deja de luchar con tus diseños de CSS.
Solía pasar horas arreglando diseños rotos con Flexbox. Intentaba envolver elementos en una fila, pero el último elemento se estiraba por toda la pantalla. Se veía mal. Probé con márgenes y trucos adicionales, pero nada funcionaba.
Entonces cambié mi mentalidad hacia CSS Grid.
La diferencia es sencilla:
- Flexbox es para diseños unidimensionales. Úsalo para una sola fila o una sola columna.
- CSS Grid es para diseños bidimensionales. Úsalo cuando necesites controlar tanto filas como columnas al mismo tiempo.
Piensa en Flexbox como una herramienta para tareas pequeñas. Piensa en Grid como una herramienta para la estructura completa de tu página.
La trampa de Flexbox: Cuando usas Flexbox para una galería, es posible que los elementos no se alineen perfectamente en todos los tamaños de pantalla. A menudo terminas con elementos "huérfanos" que rompen el ritmo de tu diseño.
La solución con Grid: Con Grid, puedes crear galerías responsivas con una sola línea de código.
Usa esto:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
Esto le indica al navegador que ajuste tantas columnas de 250px como sea posible. El navegador hace los cálculos por ti. Se acabó el adivinar. Se acabaron las filas rotas.
El ejemplo del Dashboard: Construir un dashboard con una barra lateral, contenido principal y un pie de página es difícil con Flexbox. A menudo necesitas contenedores anidados y código desordenado para lograr que el pie de página ocupe todo el ancho.
Con Grid, defines las pistas una sola vez:
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
Puedes indicarle al pie de página que se extienda desde la primera columna hasta la última con un solo comando. Tu código se vuelve limpio y fácil de leer.
Mi consejo:
• Usa Flexbox para alineaciones sencillas en encabezados o botones. • Usa Grid para los diseños principales de la página y galerías complejas. • Deja de anidar contenedores solo para solucionar un problema de diseño. • Usa la unidad fr para distribuir el espacio fácilmente.
Prueba esto hoy mismo. Toma un componente antiguo que hayas construido con Flexbox. Reescríbelo usando CSS Grid. Verás cómo tu código se acorta y tus diseños se fortalecen.