Generateur de layout masonry CSS

Genere des layouts masonry en pur CSS avec breakpoints, espacements et selecteurs ignores

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

Exemples de résultats

1 Exemples

Generer un masonry responsive sur 4 colonnes

Fournit HTML et CSS copiables avec une carte featured en pleine largeur.

HTML
```html
<section class="masonry">...
```

CSS
```css
.masonry { ... }
```
Voir paramètres d'entrée
{ "columns": 4, "containerWidth": "1200px", "gap": "20px", "layoutEngine": "grid", "responsiveBreakpoints": "640:2\n960:3\n1280:4", "skipElements": ".masonry__item--featured" }

Points clés

Catégorie
Développement et Web
Types d’entrée
number, text, select, textarea
Type de sortie
text
Couverture des échantillons
4
API disponible
Yes

Vue d’ensemble

Ce générateur de layout masonry CSS vous permet de créer rapidement des grilles en cascade responsives sans JavaScript. En configurant le nombre de colonnes, les espacements, les points de rupture et le moteur de rendu (CSS Columns ou Flexbox), vous obtenez instantanément un code HTML et CSS propre, commenté et prêt à être intégré dans vos projets web.

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.

Comment ça marche

  • •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.

Exemples

1. Galerie photo responsive type Pinterest

Développeur Front-end
Contexte
Un développeur intègre une galerie d'images où chaque photo a un ratio différent. Il veut éviter d'utiliser une librairie JS lourde.
Problème
Créer une grille fluide qui s'adapte aux mobiles, tablettes et écrans larges sans couper les images.
Comment l’utiliser
Configurer 4 colonnes, un espacement de 16px, choisir 'CSS Columns' et définir les points de rupture pour réduire le nombre de colonnes sur les petits écrans.
Configuration d’exemple
Colonnes: 4
Espacement: 16px
Breakpoints: 640:1
768:2
1024:3
Résultat
Un code CSS pur avec des media queries générées automatiquement, offrant une galerie fluide de 1 à 4 colonnes selon la taille de l'écran.

2. Flux d'actualités avec article à la une

Intégrateur Web
Contexte
Un site d'actualités présente ses articles sous forme de cartes. Le premier article ou les articles sponsorisés doivent occuper toute la largeur.
Problème
Insérer un élément pleine largeur au milieu d'une grille masonry sans casser la disposition des autres cartes.
Comment l’utiliser
Utiliser le champ 'Éléments ignorés' pour cibler la classe de l'article mis en avant.
Configuration d’exemple
Moteur: Flexbox
Éléments ignorés: .article--featured
Largeur: 100%
Résultat
Le CSS généré inclut des règles spécifiques pour que '.article--featured' s'étende sur 100% de la largeur, tandis que les autres articles s'écoulent normalement dans la grille.

Tester avec des échantillons

development
Exemples du Framework CSS Milligram
Exemples du framework CSS Milligram incluant la typographie, les formulaires, les grilles et les composants
title token css
sample
Exemples du Framework CSS 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
title token css
sample
Tailwind CSS Samples
Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations
title token css
sample
Exemples de Sélecteurs CSS
Collection d'exemples de sélecteurs CSS pour les tests d'extraction et d'analyse
title token css
sample

Hubs associés

Outils Json pour Generate
Découvrez 33 outils json pour des workflows de generate et comparez rapidement des utilitaires proches.
Outils Design pour Generate
Découvrez 19 outils design pour des workflows de generate et comparez rapidement des utilitaires proches.
Outils Pdf pour Generate
Découvrez 10 outils pdf pour des workflows de generate et comparez rapidement des utilitaires proches.
Outils Audio pour Generate
Découvrez 8 outils audio pour des workflows de generate et comparez rapidement des utilitaires proches.

FAQ

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.

Documentation de l'API

Point de terminaison de la requête

POST /fr/api/tools/css-masonry-layout-generator

Paramètres de la requête

Nom du paramètre Type Requis Description
columns number Non -
containerWidth text Non -
gap text Non -
layoutEngine select Non -
responsiveBreakpoints textarea Non -
skipElements textarea Non -

Format de réponse

{
  "result": "Processed text content",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
Texte: Texte

Documentation de MCP

Ajoutez cet outil à votre configuration de serveur MCP: 

{
  "mcpServers": {
    "elysiatools-css-masonry-layout-generator": {
      "name": "css-masonry-layout-generator",
      "description": "Genere des layouts masonry en pur CSS avec breakpoints, espacements et selecteurs ignores",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=css-masonry-layout-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Vous pouvez chaîner plusieurs outils, par ex.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, max 20 outils.

Si vous rencontrez des problèmes, veuillez nous contacter à [email protected]