Conception réactive liée aux carreaux
Nous avons un écran qui affiche des tuiles et sur chaque tuile il y a au moins un champ. Actuellement, les tuiles permettent une hauteur maximale de trois lignes de champs et un nombre illimité de colonnes. L'utilisateur est autorisé à conserver manuellement le nombre de champs par mosaïque, ce qui signifie que la largeur des mosaïques peut augmenter de manière dynamique. Le problème que nous rencontrons est qu'il laisse un espace mort sur certaines tuiles (voir les tuiles 1 et 6 dans l'exemple 1 pour les cas extrêmes).
Lorsque l'écran est redimensionné, l'ordre des tuiles est modifié de sorte qu'il s'enroule de gauche à droite, de haut en bas dans le nombre indiqué ci-dessous dans l'exemple 2. Cependant, lorsque les tuiles plus larges sont réorganisées, il y a un espace mort évident restant à l'écran.
Existe-t-il un meilleur moyen de faire fonctionner les mosaïques et les champs afin qu'ils réduisent non seulement la quantité d'espace mort, mais permettent également un réarrangement intuitif lorsque l'écran est redimensionné?
Exemple 1: 
Exemple 2: 
Qu'est-ce que l'utilisateur essaie de faire avec ce contenu?
Commencez par les priorités des utilisateurs, qui l'emportent souvent sur l'esthétique
Une chose que vous pourriez explorer est l'utilisation de Flexbox (en contexte avec bootstrap 4 ici) pour les largeurs dynamiques. Parlez-en à vos développeurs.
Voici documents MDN . Tout ce qui va plus loin est plus adapté à Stack Overflow.
Si l'ordre des tuiles est important, parlant personnellement en tant qu'utilisateur, cela ne me dérange pas d'espace mort si la séquence est maintenue pour moi. Il en va de même si la comparaison entre les carreaux est également importante.
Une autre approche (avec des mises en garde)
S'il s'agit d'une interface de navigation/d'exploration, dans laquelle les données elles-mêmes ne sont pas classées dans une importance particulière (l'ordre n'a pas d'importance), vous pouvez essayer une maçonnerie UI.
Voici une démo :
Voici une description plus approfondie :
Il y a quelques inconvénients à cela, pour n'en nommer qu'un:
Si vous avez besoin que votre contenu passe de gauche à droite dans un style ordonné par date, la maçonnerie CSS pure pourrait ne pas être la bonne solution pour vous.
Pro
- remplit l'espace et offre une expérience immersive
- encourage l'exploration, la navigation, le défilement
- fonctionne bien pour le contenu principalement visuel
Con
- difficile de rechercher du contenu pertinent si la lecture est une priorité sur toutes les tuiles
- est biaisé vers l'esthétique et peut réorganiser les informations.
- la comparaison entre les carreaux sera difficile en raison de l'alignement et du changement de forme