Comment construire une disposition de maçonnerie à l'aide de CSS

Qu'est-ce que la disposition de la maçonnerie ?

La disposition de la maçonnerie consiste à disposer des éléments de différentes tailles afin qu'il n'y ait pas d'espaces inégaux. Généralement, lorsque les éléments sont dans une vue de grille, ils sont alignés soit par ligne, soit par colonne, soit les deux. Mais dans une disposition en maçonnerie, même s'il y a un élément plus court dans une rangée ou une colonne, l'élément suivant occupera l'espace.

Comment réaliser l'agencement de la maçonnerie ?

Il existe de nombreuses façons d'y parvenir, mais l'une des meilleures consiste à utiliser grid-template-columns et à utiliser la fonction repeat() . Alors, commençons.

La propriété grid-template-columns

Outre le dimensionnement explicite des colonnes, l'un des aspects les plus précieux et les plus pratiques de CSS Grid est la possibilité de répéter les colonnes jusqu'à ce qu'elles soient remplies, puis d'y placer automatiquement des éléments. En particulier, l'option permettant de spécifier le nombre de colonnes que nous voulons dans la grille, puis de donner au navigateur le contrôle de la réactivité de ces colonnes entraîne l'affichage de moins de colonnes sur des tailles de fenêtre d'affichage plus petites et davantage de colonnes affichées à mesure que la largeur de l'écran augmente.

Ceci est réalisé en utilisant la fonction repeat() et les mots-clés de placement automatique. Pour résumer, la fonction repeat() nous permet de répéter les colonnes autant de fois que nécessaire. Par exemple, si nous créons une grille de 12 colonnes, nous pouvons écrire ce qui suit :

 .grid { display: grid; /* define the number of grid columns */ grid-template-columns: repeat(12, 1fr); }

En utilisant la directive 1fr , le navigateur est chargé de diviser l'espace disponible entre les colonnes afin que chacune reçoive une part égale. Autrement dit, quelle que soit sa taille, la grille de cet exemple aura toujours 12 colonnes. Cependant, ce n'est pas suffisant car le contenu sera trop serré sur des fenêtres plus petites.

Nous devons donc spécifier une largeur minimale pour les colonnes, en veillant à ce qu'elles ne soient pas trop étroites. Nous pouvons le faire en utilisant la fonction minmax() .

 grid-template-columns: repeat(12, minmax(300px, 1fr));

Mais à cause du fonctionnement de CSS Grid, la ligne débordera. Nous demandons explicitement au navigateur de répéter les colonnes 12 fois par ligne, donc même si la largeur de la fenêtre d'affichage est trop petite pour toutes les adapter à la nouvelle exigence de largeur minimale, la colonne ne s'enroulera pas dans de nouvelles lignes.

Pour réaliser l'habillage, nous pouvons utiliser les mots-clés auto-fit ou auto-fill .

 grid-template-columns: repeat(auto-fit, minmax(300px,1fr));

En utilisant ces mots clés, nous demandons au navigateur de s'occuper de l'habillage des éléments et de la taille des colonnes pour nous, ce qui fait que les éléments qui, autrement, déborderaient pour s'enrouler dans des lignes.

Voici à quoi ressemble la grille maintenant :

Mais ce n'est pas la disposition de la maçonnerie. Alors comment y parvenir ? Voyons.

La propriété grid-column et grid-row

Les propriétés grid-column et grid-row spécifient la taille et l'emplacement de l'élément de grille dans une disposition de grille. Ainsi, nous sommes en mesure de spécifier la largeur ou la hauteur d'un seul élément de grille dans la grille. Et pour ce faire, nous pouvons utiliser le mot-clé span .

Pour augmenter la largeur du premier élément de la grille, nous pouvons écrire :

 .grid-item: nth-child(1) { grid-column: span 2; grid-row: span 1; }

La première cellule de la grille s'étendra donc sur deux colonnes et aura l'apparence suivante :

De même, si nous voulons augmenter la hauteur du deuxième élément de la grille, nous pouvons écrire :

 .grid-item: nth-child(2) { grid-column: span 1; grid-row: span 2; }

La deuxième cellule de la grille s'étendra donc sur deux lignes et aura l'apparence suivante :

De la même manière, si nous couvrons chaque élément de la grille de la manière souhaitée, nous obtiendrons ce qui suit :

Cependant, si le nombre d'éléments de la grille est excessif, il ne sera pas possible de spécifier une hauteur et une largeur précises pour chaque élément de la grille. Ainsi, à la place, nous pouvons attribuer les valeurs dynamiquement :

 .grid-item: nth-child(7n+1) { grid-column: span 2; grid-row: span 1; } .grid-item: nth-child(7n+2) { grid-column: span 1; grid-row: span 2; } .grid-item: nth-child(7n+4) { grid-column: span 1; grid-row: span 2; } .grid-item: nth-child(7n+5) { grid-column: span 3; grid-row: span 1; }

Et voici la sortie :

Mais est-ce suffisant ? Passons au niveau supérieur en ajoutant une certaine perspective.

Nous pouvons y parvenir en ajoutant perspective() et en utilisant la propriété transform() :

 .active { transform: perspective(18cm) rotate(20deg); transform-style: preserve-3d; transform-origin: left; }

De plus, nous avons une barre de menu qui, lorsqu'elle est sélectionnée, fait passer la grille d'une grille régulière à une grille avec perspective. Nous pouvons utiliser JavaScript pour cela :

 menu.onclick=()=>{ grid.classList.toggle('active'); }

Et la sortie finale est :

As-tu aimé cet article? Faites-le moi savoir dans les commentaires ci-dessous!

Vous voulez savoir quelle est la solution JavaScript la plus polyvalente pour la visualisation de données ? Lire ici : https://techvariable.com/blogs/the-most-versatile-js-solution-to-data-visualization-d3-js/