# Generateur de layout masonry CSS Genere des layouts masonry en pur CSS avec breakpoints, espacements et selecteurs ignores > Page canonique: https://elysiatools.com/fr/tools/css-masonry-layout-generator - **Catégorie:** Development - **Mots-clés:** css, masonry, layout, grid ## Présentation Saisissez le nombre de colonnes, la largeur du conteneur, les espacements et les breakpoints, puis choisissez une implementation CSS columns ou Flexbox. Loutil produit du HTML et du CSS directement reutilisables. Le resultat contient : - un squelette HTML - du CSS commente - un resume des breakpoints et selecteurs ignores ## Entrées - **Colonnes** (number) - **Largeur du conteneur** (text) - **Espacement** (text) - **Moteur de mise en page** (select) - **Points de rupture responsifs** (textarea): 640:2 960:3 1280:4 - **Elements ignores** (textarea): .masonry__item--featured .masonry__hero ## Quand l'utiliser - Lors de la création d'une galerie d'images ou d'un portfolio avec des éléments de hauteurs variables. - Pour concevoir un flux d'articles de blog ou de cartes de produits façon Pinterest sans dépendre de bibliothèques JavaScript lourdes. - Quand vous avez besoin d'une grille responsive intégrant des éléments mis en avant (pleine largeur) au milieu d'un flux standard. ## Fonctionnement - Définissez le nombre maximum de colonnes, la largeur globale du conteneur et l'espacement (gap) entre les éléments. - Choisissez votre moteur de mise en page préféré : CSS Columns pour un effet cascade classique ou Flexbox pour un contrôle différent des rangées. - Ajoutez vos points de rupture responsifs (ex: 640:2 pour 2 colonnes à 640px) et spécifiez les sélecteurs CSS à ignorer ou afficher en pleine largeur. - Copiez le code HTML de base et le CSS généré pour les coller directement dans votre feuille de style. ## Cas d'usage - Galeries de photographies avec des formats mixtes (portrait et paysage). - Tableaux de bord affichant des widgets ou des cartes d'informations de tailles dynamiques. - Pages d'archives de blog où les articles mis en avant occupent toute la largeur au-dessus d'une grille à plusieurs colonnes. ## Questions fréquentes ### Quelle est la différence entre CSS Columns et Flexbox pour le masonry ? CSS Columns crée un véritable effet de cascade verticale (waterfall), idéal pour des hauteurs variables. Flexbox organise les éléments en lignes ou colonnes flexibles, offrant un comportement plus prévisible mais nécessitant parfois des ajustements de hauteur. ### Puis-je utiliser des unités relatives comme 'rem' ou '%' ? Oui, les champs de largeur du conteneur et d'espacement acceptent toutes les unités CSS valides (px, rem, em, %, vw). ### Comment fonctionnent les points de rupture responsifs ? Saisissez une règle par ligne au format 'largeur:colonnes' (par exemple '768:2'). Le générateur créera automatiquement les media queries CSS correspondantes. ### À quoi sert le champ 'Éléments ignorés' ? Il permet de définir des sélecteurs CSS (comme '.featured') qui casseront le flux masonry pour s'afficher sur toute la largeur du conteneur. ### Ai-je besoin de JavaScript pour faire fonctionner ce layout ? Non, le code généré repose entièrement sur du CSS pur, ce qui garantit d'excellentes performances et un chargement rapide. ## Outils associés - [Sync de palette Tailwind](https://elysiatools.com/fr/tools/tailwind-color-palette-sync): Entrez des HEX, choisissez le schéma de noms (échelle 50–950 / nom unique / imbrication) et générez le fragment theme.extend.colors de tailwind.config.ts avec les niveaux WCAG AA/AAA. Dark mode optionnel. - [Convertisseur cURL vers Go (net/http)](https://elysiatools.com/fr/tools/curl-to-go): Convertit une commande cURL en un extrait de code Go net/http avec http.NewRequest, en-têtes et corps - [Convertisseur cURL vers JavaScript (axios)](https://elysiatools.com/fr/tools/curl-to-js-axios): Convertit une commande cURL en un extrait de code JavaScript axios avec objet de config, en-têtes et données - [Convertisseur cURL vers JavaScript (fetch)](https://elysiatools.com/fr/tools/curl-to-js-fetch): Convertit une commande cURL en un extrait de code JavaScript fetch() avec en-têtes, corps et méthode - [Convertisseur cURL vers PHP (cURL)](https://elysiatools.com/fr/tools/curl-to-php): Convertit une commande cURL en un extrait de code PHP cURL avec curl_setopt, en-têtes et champs POST - [Convertisseur cURL vers Python (requests)](https://elysiatools.com/fr/tools/curl-to-python): Convertit une commande cURL en un extrait de code Python requests avec en-têtes, données et méthode - [Raccourcisseur d'URL](https://elysiatools.com/fr/tools/url-shortener): Génère des URL courtes en utilisant de vrais services de raccourcissement (is.gd et v.gd) - [Testeur de stress de contrat API](https://elysiatools.com/fr/tools/api-contract-stress-tester): Genere des tests de valeurs limites depuis OpenAPI 3.x et peut les envoyer a un backend reel pour reperer les ecarts de contrat. ## Exemples - [Exemples du Framework CSS Bulma](https://elysiatools.com/fr/samples/bulma): Exemples du framework CSS Bulma incluant les colonnes, composants, contrôles de formulaire, système de mise en page et modèles de conception modernes basés sur CSS - [Echantillons CSS](https://elysiatools.com/fr/samples/css-viewer-samples): Fichiers d exemple pour la visionneuse CSS dans le navigateur - [Exemples du Framework CSS Milligram](https://elysiatools.com/fr/samples/milligram): Exemples du framework CSS Milligram incluant la typographie, les formulaires, les grilles et les composants - [Tailwind CSS Samples](https://elysiatools.com/fr/samples/tailwind-css): Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations ## Contenu associé - [Création de CSS, mise en page et cascade](https://elysiatools.com/fr/hubs/css-authoring-layout-and-cascade-workflows): Créez et révisez du CSS avec formatage, diagnostic des sélecteurs, extraits responsives, effets visuels et contrôles rendus.