Déplacement d'éléments dans une structure de grille CSS [Guide]
En utilisant le Module de disposition de grille CSS dans la conception Web devient de plus en plus possible que de plus en plus de navigateurs commencent à soutiens le. Lors de la création de présentations remplissant des cellules de la grille, il peut arriver un moment où vous souhaitez réaliser des tâches plus complexes..
Par exemple, vous voudrez peut-être se déplacer légèrement certains éléments de la grille sont bloqués dans leurs zones. Vous voudrez peut-être aussi les sortir du conteneur de grille (débordement), ou les uns sur les autres (chevauchement), ou juste… vers un espace vide autour.
Donc, dans ce post, je vais vous montrer comment vous pouvez déplacer, ordonner, déborder, superposer et dimensionner les éléments de la grille lorsque vous utilisez le module CSS Grid Layout.
Créer une grille CSS
Commençons par créer une grille CSS simple avec une rangée et trois colonnes.
Dans le HTML, nous créons un groupe de divs où le conteneur de grille contient les trois éléments de la grille.
Dans le CSS, le conteneur de grille a la affichage: grille; propriété et les éléments de la grille avoir surface de la grille qui identifie les noms des zones d'élément de grille.
Nous avons aussi ajouter le grille-template-zones propriété au conteneur de grille, dans lequel les noms de zone de grille sont utilisés pour attribuer les zones de la grille aux cellules de la grille qu'elles représentent.
Toutes les colonnes prendre la taille d'une fraction (fr) de la largeur du conteneur, assurant le confinement des éléments de la grille.
.grid-container display: grid; grid-template-areas: 'gauche centre droite'; Grille-modèle-colonnes: répéter (3, 1fr); grid-template-rows: 80px; intervalle de grille: 5px; largeur: 360px; couleur de fond: magenta; .grid-left grid-area: left; .grid-center grid-area: centre; .grid-right grid-area: right; .grid-container div background-color: lightgreen;
Dépassement d'éléments de la grille
Vous pouvez faire un élément de la grille déborder de son conteneur de grille si c'est nécessaire pour une mise en page. Pour obtenir l'effet de débordement, il vous suffit de utiliser une taille de colonne différente:
.grid-container display: grid; grid-template-areas: 'gauche centre droite'; grid-template-columns: repeat (3, 150px); intervalle de grille: 5px;
le somme de la taille de la colonne et de l'espace est plus grand que le largeur du conteneur, ce qui provoque le débordement des éléments de la grille dans leur conteneur.
Chevauchement des éléments de la grille
UNE L'élément de grille peut se chevaucher (complètement ou partiellement couvert) un autre élément de la grille dans les cas suivants:
- Il est configuré pour s'étendre sur (et sur) les cellules d'un autre élément de la grille.
- Sa taille a été augmentée, ce qui le fait chevaucher avec l'élément de grille proche.
- Il est déplacé au-dessus d'un autre élément de la grille.
Nous discuterons des deuxième et troisième cas plus tard, dans le “Dimensionnement” et “En mouvement” sections.
Voyons d’abord le premier cas où un élément de la grille s'étend sur un autre.
L'élément de grille au centre a étalé sur le gauche, de sorte que seuls deux éléments sont visibles à l'écran.
.grid-center grid-area: centre; grille-colonne: 1/3;
le colonne de grille et rangée de la grille Propriétés assigner des lignes de grille entre lesquels une colonne ou une rangée doit tenir.
Sur le diagramme ci-dessous, vous pouvez voir comment le grille-colonne: 1/3 La règle CSS fonctionne: la colonne centrale étendues entre les lignes de grille 1 et 3. En conséquence, la colonne centrale chevauche la colonne de gauche..
Déplacer des éléments de la grille
En déplaçant, je veux dire déplacer légèrement les objets. Si vous voulez complètement déplacer un élément dans une autre cellule / zone de grille, je vous recommande de mettre à jour le code de création de la grille..
Parcourir les éléments de la grille est simple. Juste Utilisez le marge, la transformer, ou la position: relative; Propriétés. Voir ci-dessous comment les éléments sont déplacés à l'aide de ces propriétés.
Les éléments de grille centraux et droits peuvent être déplacés (comme indiqué ci-dessus) des manières suivantes:
1. Utilisation marge
Les marges négatives augmentent les dimensions des éléments de la grille, tandis que les marges positives les réduisent. En combinant les deux, vous pouvez déplacer légèrement les éléments de la grille.
.grid-center grid-area: centre; marge gauche: -10px; marge droite: 10px; marge supérieure: -10px; marge inférieure: 10px; .grid-right grid-area: right; marge gauche: 10px; marge droite: -10px; marge supérieure: -10px; marge inférieure: 10px;
2. Utilisation transformer
le Traduire() Fonction CSS déplace un élément le long des axes x et y. En l’utilisant avec le transformer propriété vous permet de changer la position d'un élément de la grille.
.grid-center grid-area: centre; transformer: traduire (-10px, -10px); .grid-right grid-area: right; transformer: traduire (10px, -10px);
3. Utilisation position
En utilisant le position: relative; règle avec le spécifié Haut, bas, la gauche, et droite les propriétés peuvent également être utilisées pour se déplacer autour des éléments de la grille.
.grid-center grid-area: centre; position: relative; en bas: 10px; à droite: 10px; .grid-right grid-area: right; position: relative; en bas: 10px; à gauche: 10px;
Ordre des éléments de la grille
Les éléments de la grille sont rendus à l'écran dans l'ordre dans lequel ils apparaissent dans le code source HTML.
Dans la section précédente, lorsque l'élément central était déplacé à gauche, il était placé en haut de l'élément de gauche par le navigateur. C'est arrivé parce que dans le HTML, Cependant, nous pouvons changer les éléments de la grille de commande en utilisant le En utilisant le Comme dans le module CSS Grid Layout, modification de l'ordre des éléments en HTML n'affecte pas la disposition de la grille, vous pouvez aussi mettre Si vous utilisez des lignes ou des colonnes à taille automatique pour un élément de la grille (en utilisant N'oubliez pas que dans notre exemple de grille, les trois colonnes représentent une fraction ( Ici, on change la taille de l'élément de gauche en utilisant le Ici, on change la taille de l'élément de gauche en utilisant le z-index ou la ordre Propriétés CSS.
z-index: 1; règle, l'élément de grille de gauche obtenu un contexte d'empilement plus élevé.. grid-left grid-area: gauche; z-index: 1;
Éléments de la grille de taille
auto, fr, gr unités), il sera réduit pour laisser la place à son article voisin qui a grandi en taille seulement si ledit article n'a pas été classé par transformer ou une marge négative.fr) du conteneur de grille. Regardez comment les trois éléments se ressemblent après que celui de gauche soit redimensionné de deux manières différentes.1. Taille avec
largeur et la taillelargeur et la taille Propriétés. En conséquence, il reste dans le conteneur de grille.
.grid-left grid-area: gauche; largeur: 200px; hauteur: 90px;
2. Taille avec
transformertransformer propriété. En conséquence, il déborde du conteneur et l’espace réseau disparaît également.
.grid-left grid-area: gauche; transformer: scalex (1,8);
