Flexbox y Grid
Los dos sistemas de CSS para colocar elementos: Flexbox los ordena en una fila o columna y Grid en una rejilla de filas y columnas.
Flexbox (display: flex) reparte elementos en una sola dirección y los alinea fácilmente: menús, barras de botones o centrar algo en vertical.
Grid (display: grid) trabaja en dos dimensiones a la vez y es ideal para la estructura general de una página o galerías. Se pueden combinar: una rejilla de tarjetas cuyo contenido se ordena con Flexbox.
Un ejemplo
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) crea una galería que pasa sola de una a varias columnas según el ancho.