Maquetación con Flexbox y Grid

Una barra de navegación: el logotipo a la izquierda, los enlaces en el centro, un botón a la derecha. Escribes flex, añades justify-between y el resultado es casi correcto, salvo que los enlaces no están centrados en la página, sino que flotan en medio del espacio restante, y todo se desplaza en cuanto un nombre de usuario es más largo. Añades flex-1, luego un mx-auto, luego un w-1/3 que arregla el síntoma y rompe la visualización en móvil. Una hora después tienes seis clases de apaño y una maquetación frágil.

El problema casi nunca es Tailwind. Es que Flexbox y Grid no sirven para lo mismo, y la mitad de las dificultades de alineación vienen de haber elegido el equivocado de los dos. Flexbox distribuye elementos en un solo eje, dejando que sus tamaños se ajusten al contenido: es la herramienta de las barras, los grupos de botones y las líneas de metadatos. Grid establece una estructura bidimensional decidida de antemano, independiente del contenido: es la herramienta de las cuadrículas de tarjetas, las plantillas de página y los formularios alineados. Una barra de navegación con tres zonas fijas es un problema de Grid, no de Flexbox; de ahí la hora perdida.