--- title: "Tailles et disposition des vignettes dans Smart Tiles" description: "Comment les vignettes sont organisées dans le composant WebPart Vitextra Smart Tiles : les six tailles de vignette, d'Extra Small à Full Width, et la part de la ligne qu'occupe chacune, le retour à la ligne et l'étirement des vignettes pour remplir les lignes, les paramètres Internal, Icon et External Indent, la hauteur des vignettes, ainsi que des recettes de disposition pour les sections, les colonnes et les panneaux pleine largeur." url: https://vitextra.com/fr/support/kb/10247 language: fr published: 2026-10-13 modified: 2026-10-13 products: - "Smart Tiles" author: "Lidija Reising" tags: ["taille Smart Tiles", "largeur de vignette SharePoint", "vignette Extra Small Full Width", "disposition des vignettes SharePoint Online", "espacement des vignettes retrait", "External Indent", "Internal Indent", "vignettes adaptatives SharePoint", "vignettes section pleine largeur", "disposition Vitextra Smart Tiles"] --- # Tailles et disposition des vignettes dans Smart Tiles Comment les vignettes sont organisées dans le composant WebPart Vitextra Smart Tiles : les six tailles de vignette, d'Extra Small à Full Width, et la part de la ligne qu'occupe chacune, le retour à la ligne et l'étirement des vignettes pour remplir les lignes, les paramètres Internal, Icon et External Indent, la hauteur des vignettes, ainsi que des recettes de disposition pour les sections, les colonnes et les panneaux pleine largeur. ## Introduction Un panneau dans [Smart Tiles](https://vitextra.com/fr/products/smart-tiles) n'est pas une grille fixe. Les vignettes s'organisent en lignes comme les mots dans un texte : chaque vignette demande une part de la ligne selon sa **Size**, la ligne se remplit de gauche à droite, et tout ce qui ne tient pas commence la ligne suivante. Comprendre ce fonctionnement fait toute la différence entre un panneau qui est simplement correct sur un écran et un panneau qui paraît soigné sur tous les écrans. Cet article explique les tailles, les retraits et la hauteur des vignettes, et propose quelques recettes de disposition. ## Les six tailles La taille d'une vignette est sa largeur, exprimée en part de la ligne. Choisissez-la dans le menu contextuel de la vignette : cliquez sur le bouton **…**, pointez sur **Size** et sélectionnez l'une des six entrées ; la taille actuelle est repérée par une coche. |::Taille::|::Part de base de la ligne::|::Vignettes par ligne (même taille)::| |:---|:---|:---| |**Extra Small**|15 %|6| |**Small**|30 %|3| |**Medium**|45 %|2| |**Large**|65 %|1, avec de la place pour une vignette Small ou Extra Small à côté| |**Extra Large**|80 %|1, avec de la place pour une vignette Extra Small à côté| |**Full Width**|100 %|1| ![Les six tailles de vignette](https://static.vitextra.com/articles/10247/tile-sizes-fr.png) *Les six tailles de vignette* Une nouvelle vignette est de taille **Small**. ### Comment les lignes se remplissent Deux règles complètent le tableau : 1. **Les vignettes s'étirent pour remplir la ligne.** La part indiquée dans le tableau est un minimum. Lorsqu'il reste de la place dans une ligne (par exemple deux vignettes Small seules sur une ligne), les vignettes s'agrandissent pour la remplir, les tailles les plus grandes s'agrandissant plus vite que les plus petites. Les lignes sont donc toujours pleines, sans bord droit irrégulier. 2. **Une vignette qui ne tient pas passe à la ligne suivante.** Trois vignettes Small remplissent une ligne ; une quatrième en commence une nouvelle. Une vignette Medium placée après deux vignettes Small ne tient pas dans les 40 % restants et commence une nouvelle ligne, où elle s'étire sur toute la largeur si rien ne la suit. La seconde règle est celle qui surprend : une vignette Small isolée à la fin du panneau sera étirée en vignette Full Width. Comptez les parts de chaque ligne (elles doivent totaliser environ 90 à 100 %) ou terminez le panneau par des vignettes qui remplissent exactement leur ligne. ![Une vignette isolée s'étire pour remplir sa ligne](https://static.vitextra.com/articles/10247/row-filling-fr.png) *Une vignette isolée s'étire pour remplir sa ligne* 📝 **Remarque** Les parts sont relatives à la largeur du composant WebPart, et non à celle de l'écran. Dans une section à deux colonnes, le composant WebPart est deux fois moins large : trois vignettes Small forment donc toujours une ligne, chacune étant deux fois moins large que dans une section pleine largeur. Sur un téléphone, où la page tient en une seule colonne étroite, les vignettes restent dans les mêmes lignes et deviennent simplement plus étroites. ## Hauteur La hauteur d'une vignette ne se définit pas directement. Elle est la somme du contenu (l'icône à sa **Icon size**, le titre à sa **Font Size** et la description, si elle est affichée) et de l'**Internal Indent** au-dessus et au-dessous du contenu. Toutes les vignettes d'une ligne ont la même hauteur, celle de la plus haute. Pour agrandir les vignettes en hauteur sans agrandir l'icône ni le texte, augmentez **Internal Indent** ; pour les rendre quasi carrées, combinez un Internal Indent élevé avec des vignettes Small ou Extra Small. ## Les trois retraits Le groupe **Appearance** du volet des propriétés comporte trois paramètres d'espacement, chacun de 0 à 30 pixels : |::Paramètre::|::Ce qu'il espace::| |:---|:---| |**Internal Indent**|Au-dessus et au-dessous du contenu d'une vignette : la « marge intérieure » (padding). Il détermine la hauteur des vignettes.| |**Icon Indent**|Entre l'icône et le titre.| |**External Indent**|Entre les vignettes voisines, horizontalement et verticalement : la « gouttière » (gap). À 0, les vignettes se touchent et le panneau devient une mosaïque compacte ; à 10–16, les vignettes se lisent comme des cartes distinctes.| ![External et Internal Indent](https://static.vitextra.com/articles/10247/indents-fr.png) *External et Internal Indent* ## Recettes de disposition **Barre de liens rapides.** Six vignettes Extra Small, External Indent 4, Internal Indent 8, titres affichés, descriptions masquées. Une ligne de boutons compacts sous la bannière principale d'une page d'accueil. **Panneau de service.** Une vignette Full Width comme en-tête du panneau (une photo en arrière-plan et le nom du service), suivie de lignes de trois vignettes Small présentant les prestations du service. External Indent 8. **Vignette à la une et liste.** Une vignette Large avec une image d'arrière-plan et une description, et une vignette Small à côté ; en dessous, deux lignes de trois vignettes Small. La vignette Large attire le regard vers le lien le plus important. **Mosaïque.** Un mélange de vignettes Extra Small et Small avec External Indent 0, toutes dans des couleurs d'accentuation, icônes uniquement (titres masqués). Le rendu est optimal dans une ::section pleine largeur:: sur un site de communication. 💡 **Astuce** Créez le panneau dans une section pleine largeur lorsqu'il constitue la navigation principale de la page ; consultez [KB10042. Comment ajouter et configurer le composant WebPart Smart Tiles](https://vitextra.com/fr/support/kb/10042). Pour les textes des vignettes, consultez [KB10249. Afficher des titres et des descriptions sur les vignettes](https://vitextra.com/fr/support/kb/10249). ❗ **Important** Vérifiez le panneau avec une fenêtre étroite avant de le publier : réduisez la largeur de la fenêtre du navigateur ou utilisez l'aperçu mobile de la page. Les titres longs qui tiennent dans une vignette Full Width sont tronqués par des points de suspension sur une vignette Small ; la description, lorsqu'elle ne tient pas, est tronquée de la même manière.