102.3K+Télécharger
Aller au guide d’utilisation
Layout Gridpar Owl-Listener

Layout Grid Skill.

Définissez des colonnes, des marges et un comportement responsive communs pour des mises en page de pages apparentées.

  • Design d’interface
  • Mise en page responsive
Télécharger OpenDesignVoir le guide d’utilisation
Revue de la source · Layout GridSKILL.md
Tâche Design d’interface Produit • Un tableau des points de rupture avec colonnes, gouttières, marges et limites de conteneur. • Des règles de mise en page pour les zones contenues, pleine largeur, barres latérales et cartes. • Des notes destinées aux développeurs expliquant l’adaptation d’une largeur à l’autre. Avant de commencer Aucune dépendance d’exécution nommée ; il faut de vraies contraintes de contenu pour choisir des valeurs de grille utiles.
Résumé éditorial · source examinée 2026-10-07 · pas un exemple généré

01 Fonctionnement

Définir une grille de page responsive

Une référence concise sur l’anatomie des grilles, les types de grilles, le comportement responsive et les schémas courants de mise en page.

Flux de travail fondé sur la sourcePas un benchmark d’exécution

La méthode de travail

Layout Grid se concentre sur l’ossature de la page : colonnes, gouttières, marges extérieures et leur évolution selon la taille de la fenêtre. Il distingue les colonnes fluides, les conteneurs à largeur maximale fixe et les mises en page adaptatives, afin qu’une spécification de grille décrive un comportement et pas seulement une capture d’écran de bureau.

La source est un guide compact, pas une bibliothèque d’implémentation. Ses nombres de colonnes courants et ses exemples de points de rupture sont des points de départ. Le résultat utile est une grille choisie pour le contenu, avec des instructions claires pour les zones pleine largeur, les sections de lecture contenues, les barres latérales et les cartes répétées.

Livrables attendus

  • Un tableau des points de rupture avec colonnes, gouttières, marges et limites de conteneur.
  • Des règles de mise en page pour les zones contenues, pleine largeur, barres latérales et cartes.
  • Des notes destinées aux développeurs expliquant l’adaptation d’une largeur à l’autre.
Voir l’exemple de brief

Du brief à la revue

  1. 01
    Choisir le type de grille

    Associez une structure en colonnes, modulaire, de ligne de base ou composée au contenu, au lieu de supposer que toutes les pages ont besoin de la même grille.

  2. 02
    Spécifier le comportement selon la largeur

    Définissez où les colonnes s’étirent, où un conteneur cesse de grandir, et quand des colonnes ou des barres latérales disparaissent.

  3. 03
    Examiner les largeurs intermédiaires

    Vérifiez les transitions autour des points de rupture, pas seulement les plus petits et plus grands écrans de référence.

02 Cas d’usage

Quand l’utiliser

Aucune dépendance d’exécution nommée ; il faut de vraies contraintes de contenu pour choisir des valeurs de grille utiles.

Un bon choix

  • Établir la structure de pageUtile avant de produire une famille d’écrans qui doivent partager le même alignement.
  • Concilier des schémas de mise en pageOffre une base commune pour des pages mêlant texte, cartes et zones asymétriques.

Limites à vérifier

  • Pas des jetons d’espacement interneLe remplissage et les écarts à l’intérieur des composants relèvent de Spacing System.
  • Tester les points de ruptureLes valeurs suggérées doivent être testées avec du contenu réel et dans l’environnement cible.

Éléments à fournir

  • Zones de contenuListez les principales zones de la page et leur importance relative.
  • Cibles d’affichageIndiquez les largeurs prises en charge et les conventions de conteneur existantes.
  • Contraintes de mise en pageIdentifiez les barres latérales fixes, les largeurs minimales de carte et les sections volontairement pleine largeur.

03 Décisions importantes

Décisions importantes

  1. Le comportement fait partie de la grille

    Une spécification qui ne décrit que les colonnes de bureau laisse sans réponse les décisions responsives les plus difficiles.

  2. Exceptions volontaires

    Sortir de la grille peut mettre un contenu en valeur, mais cela doit être délibéré et non un désalignement accidentel.

04 Exemple de brief

Essayer un brief ciblé

L’exemple de brief ci-dessous n’a pas été testé. Vérifiez la configuration du skill avant de l’utiliser.

Vérifier la configuration

Utilisez la méthode d’installation documentée du dépôt et conservez tous les fichiers complémentaires référencés. Cette entrée décrit une méthode de design ciblée, pas une application exécutable.

Fichier source amont
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/layout-grid/SKILL.md

Aucune dépendance d’exécution nommée ; il faut de vraies contraintes de contenu pour choisir des valeurs de grille utiles.

Commencer par un seul livrable

Adaptez la portée, le matériau source et les contraintes de ce brief avant d’exécuter le skill.

Exemple de brief
Utilise layout-grid pour spécifier une page de documentation avec une barre latérale de section, un corps d’article et une table des matières facultative. Définis le nombre de colonnes, les gouttières, les marges, les largeurs maximales et le comportement de repli. Explique ce qui se passe entre le bureau et le mobile, et garde la largeur de lecture distincte de la grille extérieure de la page.

Examiner le résultat

Comparez le résultat réel à ces critères observables.

  • Chaque largeur cible a des règles explicites de marges et de gouttières.
  • Le repli de la barre latérale est décrit et non sous-entendu.
  • Les exceptions volontaires à la grille sont nommées.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est inclus, ni que ses outils externes, identifiants et dépendances logicielles le sont.

Télécharger OpenDesignLire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source
Owl-Listener
Dépôt
Owl-Listener/designer-skills
Fichier du skill
ui-design/skills/layout-grid/SKILL.md
Licence
MIT
Instantané examiné
2026-10-07 · 9a6930cf84a8
Résumé éditorial de la source
Une référence concise sur l’anatomie des grilles, les types de grilles, le comportement responsive et les schémas courants de mise en page.

Résumé original par OpenDesign, d’après la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, pas une mesure d’utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Faut-il une grille de bureau à 12 colonnes ?

Non. La source indique des nombres de colonnes courants et plusieurs types de grilles ; c’est le contenu qui doit guider le choix.

Produira-t-il du CSS ?

La source demande des spécifications de grille documentées mais n’impose ni framework CSS particulier ni livrable de code.

En quoi diffère-t-il du design responsive ?

Ce skill se concentre sur la grille structurelle. Les décisions responsives plus larges incluent la priorité du contenu, les commandes et l’interaction entre appareils.

OpenDesign

Faites de la place pour la prochaine itération de design.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l’ajouter à votre flux de travail.

Télécharger OpenDesignParcourir les skills de design
Fichier source amont
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/layout-grid/SKILL.md