Grilles de mise en page CSS réactives sans requêtes multimédias —

La base de nombreux sites continue d’être une grille de mise en page, qu’elle soit composée de grille ou de Flexbox. Dans cet extrait de Libérer la puissance du CSS : techniques avancées pour des interfaces utilisateur réactivesnous verrons comment ces deux outils permettent de créer des grilles de mise en page fluides et réactives sans requêtes multimédias.

Mises en page réactives avec grille

La première est peut-être ma préférée de toutes les solutions, en raison de sa polyvalence et de sa facilité d’utilisation. En utilisant Grid, nous pouvons créer un ensemble réactif de colonnes qui se créent au besoin. Nous fournirons une seule contrainte – une largeur minimale que les colonnes peuvent avoir – qui fait double emploi comme une sorte de « point d’arrêt » avant que les éléments de colonne ne se brisent sur de nouvelles lignes.

La vidéo suivante montre le comportement que nous recherchons.

Voici tout ce qu’il faut pour réaliser cette mise en page de grille réactive, où notre taille de colonne minimale est définie sur 30ch via une propriété personnalisée d’assistance. Cette règle ordonne au navigateur de créer autant de colonnes qu’il convient et qui sont au moins 30ch large:

.grid {
  --min: 30ch;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
}

Depuis 1fr est la valeur « max » de minmax(), les colonnes sont également autorisées à s’étirer pour remplir équitablement tout espace restant dans une rangée. Ainsi, si l’espace disponible est 80ch et il y a deux enfants de la grille, ils prendront chacun 40ch. S’il y a trois enfants, le troisième sera au deuxième rang, puisque 80 ne se divise pas également dans la taille minimale autorisée de 30.

Ce qui suit Démo CodePen fournit un exemple en direct d’une disposition de grille réactive.

Voir le stylo
Disposition de grille CSS réactive par SitePoint (@SitePoint)
sur CodePen.

Mises en page réactives avec Flexbox

Nous pouvons réaliser une expérience similaire avec Flexbox. La différence entre la solution Flexbox et Grid est que les éléments de grille qui s’écoulent vers une nouvelle ligne ne peuvent pas s’étendre sur plusieurs colonnes de grille. Avec Flexbox, nous pouvons faire en sorte que les éléments flexibles grandissent pour remplir tout l’espace supplémentaire restant, évitant ainsi qu’un « orphelin » n’apparaisse avec la solution Grid.

Dans ce code, comme dans le code Grid, le navigateur créera autant de colonnes qu’il conviendra à l’espace en ligne avec au moins le --min taille de 30ch. Si nous avons trois éléments et que le troisième doit être déplacé vers une nouvelle ligne, il occupera l’espace restant en raison de la flex sténographie, qui définit surtout flex-grow pour 1. Il a donc un comportement similaire à 1fr dans la plupart des cas:

.flexbox-grid {
  --min: 30ch;

  display: flex;
  flex-wrap: wrap;
}

.flexbox-grid > * {
  flex: 1 1 var(--min);
}

L’image ci-dessous montre le dernier élément de liste impair sur deux colonnes, grâce à la flex-grow propriété.

Remarque : dans les deux solutions Grid et Flexbox, si nous ajoutons un gapcet espace sera soustrait du calcul du nombre de colonnes pouvant être créées avant l’ajout de nouvelles lignes.

Les lecteurs avertis ont peut-être remarqué une autre différence essentielle entre ces solutions : lors de l’utilisation de Grid, le parent définit le comportement de l’enfant. Pour Flexbox, nous définissons le comportement de mise en page enfant sur les enfants. Le flex sténographies, dans l’ordre, flex-grow, flex-shrinket flex-basis.

A titre expérimental, nous pouvons modifier le flex-grow valeur à 0 et voyez comment les éléments ne s’étendront que jusqu’à la flex-basis valeur. (Expérimentez avec la démo CodePen ci-dessous.) Il est important de garder flex-shrink pour 1de sorte que, éventuellement – lorsque l’espace disponible en ligne est plus étroit que le flex-basis — les articles sont toujours autorisés à « rétrécir », car cela permet d’éviter les débordements.

Ce qui suit Démo CodePen montre notre mise en page Flexbox en action.

Voir le stylo
Disposition réactive de la grille Flexbox par SitePoint (@SitePoint)
sur CodePen.

Le flex-basis La propriété peut être ajustée davantage pour cette solution afin d’attribuer des « points d’arrêt » uniques pour différents éléments. Étant donné que nous définissons cette valeur via le --min propriété personnalisée et que les enfants Flexbox contrôlent leur propre taille, nous pouvons l’ajuster avec un style en ligne :

<li style="--min: 40ch">...</li>

Les autres enfants de la liste dans cet exemple circuleront toujours autour d’elle et utiliseront le 30ch de la règle de base, mais la colonne plus large modifie effectivement le comportement.

Voici un Démo CodePen de ce code en action.

Voir le stylo
Disposition Responsive Flexbox Grid – ajustée –min par SitePoint (@SitePoint)
sur CodePen.

Voici deux autres techniques Flexbox qui utilisent flex-grow et flex-basis de manière intéressante :

• Heydon Pickering Flexbox Saint Albatrosqui décompose les colonnes en une seule ligne en fonction de la largeur totale du conteneur parent.
• Heydon Pickering et Andy Bell disposition de la barre latéralequi montre comment forcer des points d’arrêt variables basés sur Flexbox pour un meilleur contrôle du moment où les éléments s’enroulent.

Cet article est extrait de Libérer la puissance du CSS : techniques avancées pour des interfaces utilisateur réactivesdisponible sur SitePoint Premium.