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 et à utiliser la fonction . Alors, commençons. grid-template-columns repeat() 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 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 : repeat() .grid { display: grid; /* define the number of grid columns */ grid-template-columns: repeat(12, 1fr); } En utilisant la directive , 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. 1fr 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 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. de CSS Pour réaliser l'habillage, nous pouvons utiliser les mots-clés ou . auto-fit 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. propriété et La grid-column grid-row Les propriétés et 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é . grid-column grid-row 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 : Faites-le moi savoir dans les commentaires ci-dessous! As-tu aimé cet article? 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/

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Cet audio est produit dans la langue originale de l'histoire !

Trop long; Pour lire

Making security fun one episode at a time

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

Trop long; Pour lire

Abhigyan

STORY’S CREDIBILITY

Code License

Guide

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

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

Trop long; Pour lire

Abhigyan

STORY’S CREDIBILITY

Code License

Guide

About Author

ÉTIQUETTES

Languages

CET ARTICLE A ÉTÉ PARU DANS...

HISTOIRES CONNEXES