Qu'est-ce qu'une grille flexible en mise en page responsive ? Un guide pour développer une conception Web réactive à l'aide de mises en page en grille flottante

Un site internet ou sa mise en page ne peut s'en passer grille modulaire avec colonnes, selon lequel la structure en blocs du site est construite. Les grilles sont utilisées aussi bien par les concepteurs expérimentés que par les débutants. Il suffit à ces derniers d'adopter cette sélection avec outils en ligne pour créer des grilles PSD modulaires et, car ils faciliteront grandement le travail de création d'un site Web et le rendront plus correct d'un point de vue technique, surtout s'il s'agit d'une sorte de ressource d'information, par exemple un site d'actualités, un blog ou un portail, où le principal l'accent est mis sur la présentation de l'information de haute qualité.

Il existe une opinion similaire outils de maillage applicable uniquement lors de la création d’un site internet. Cependant, si vous partez de votre expérience personnelle, vous pouvez contester cela. J'utilise actuellement des grilles dans 99% de mes projets, y compris les sites non responsive. De plus. Je réalise de nombreuses autres tâches basées sur des grilles, par exemple des bannières ou des gribouillages similaires.

Comment cela marche-t-il? Très simple. Le concepteur précise les paramètres de génération d'un maillage pré-approuvé par toute l'équipe de développement. Ensuite, il télécharge une image avec des colonnes dessinées au format PNG ou PSD, et construit la conception du site en fonction des lignes résultantes. Le maquettiste, disposant d'un cadre pré-préparé, commence déjà à composer. Tout cela accélère considérablement le travail sur le site tant pour le concepteur que pour le maquettiste.

Si nous parlons d'aménagement utilisant une grille modulaire, alors beaucoup ont déjà été créés pour cela css. Le plus courant est Bootstrap. Si le projet n'est pas activé, certains des outils proposés sont capables de générer, avec l'image de la grille, leur propre cadre complet avec des paramètres personnalisés intégrés, qui ont été spécifiés lors de la première étape.

Donc. Nous portons à votre connaissance un ensemble d'outils pour création de grilles modulaires PSD et CSS, ce qui facilitera grandement la création du site.

Responsifier.it

Simple et pratique outil de maillage réactif. Génère à la fois un fichier PNG pour le développement de la conception et styles CSS pour le maquettiste. Le gros avantage de ce service est que vous pouvez voir immédiatement le résultat final. En bas se trouve un commutateur de résolution d'écran. Avec lui, vous pouvez voir comment les colonnes du site sont réorganisées sur différents appareils.

Calculateur de grille

Mon préféré outil de grille modulaire, que j'utilise régulièrement. C'est une certaine calculatrice, qui vous informera instantanément quelle sera la largeur des colonnes pour certains paramètres de la grille modulaire. C'est très pratique et utile. Calculateur de grille permet générer des grilles modulaires au format PNG, images vectorielles et motifs pour Photoshop JSX

Modèle de grille modulaire

Bien générateur d'images avec grilles modulaires au format PSD et PNG. Sa principale différence par rapport à la plupart des concurrents est qu'il peut construire non seulement des colonnes, mais aussi lignes horizontales. Ce sera un outil utile pour certaines tâches. Par exemple, cela facilitera le travail fastidieux de dessin de tableaux avec des données lors du développement de la conception d'un site Web.

Continuons le sujet mise en page adaptative. Aujourd'hui, nous allons parler de l'un des trois piliers de la mise en page adaptative : disposition basée sur une grille(mise en page flexible basée sur une grille). Les deux autres sont des images flexibles.

Au milieu du XXe siècle, les graphistes ont popularisé le concept typographique, ou modulaire, en maille- un système rationnel de colonnes et de lignes dans lesquelles pourraient être placés des modules avec du contenu. Cela avait l'air frais et très harmonieux.

Cependant, le graphisme et le web design sont, comme on dit à Odessa, deux grandes différences. Le point clé ici est la taille de la page. En typographie, c'est fixe, mais une page Web peut s'étirer et se rétrécir en fonction de l'objet sur lequel elle est consultée.

Pour appliquer une grille modulaire à une page Web, utilisez une formule de proportionnalité simple :

cible/contexte=résultat

La façon la plus simple de comprendre cette formule est de prendre un exemple clair. Supposons que nous ayons une présentation de site Web en deux colonnes : une partie de contenu et une barre latérale :

Nous le recouvrirons de caoutchouc. Mais voici le problème : comment définir la largeur des deux blocs ? Après tout, si vous l'écrivez en pixels, ils ne seront plus en caoutchouc. Cela signifie que vous devez utiliser des pourcentages et non des pixels. Mais excusez-moi, quelles valeurs dois-je écrire ? Il faut quand même partir de quelque chose.

Vous pouvez bien sûr estimer à l'œil nu : le contenu occupe environ 70 % de la largeur totale de la page et la barre latérale - 30 %. Mais le bon maquettiste ne devine jamais rien à l’oeil nu. Nous avons besoin de la taille exacte.

C’est à cela que sert la formule de proportionnalité. Nous prenons simplement la largeur des blocs intérieurs et la divisons par la largeur totale de la page. Ici, la page entière est contexte, et chacun des blocs internes, respectivement, cibleà partir de la formule ci-dessus.

660 / 960 = 0,6875
300 / 960 = 0,3125

Il ne reste plus qu'à convertir ces données en pourcentages. Sans trop vous inquiéter, déplacez simplement la virgule de deux places vers la droite. On obtient :

68,75%
31,25%

C'est aussi simple que ça. Cependant, compliquons la tâche. Supposons que notre partie contenu soit divisée en deux parties plus inégales. Par exemple, à gauche, il y a une colonne étroite avec la date de l'article et les boutons sociaux situés verticalement, et la colonne de droite est large, et nous y avons le texte de l'article.

D'après la disposition du design, nous savons que la largeur de cette colonne étroite est de 120 pixels et celle de la colonne large de 520. Comment convertir ces nombres en % ? Encore une fois, appliquez la formule de proportion. Mais cette fois, comme contexte, nous n'utilisons pas toute la largeur de la page, mais la largeur du bloc qui contient ces deux colonnes, c'est-à-dire la largeur de la partie contenu, qui est de 660 pixels. Diviser:

120 / 660 = 0,1818
520 / 660 = 0,7878

En pourcentage, nous obtenons respectivement 18,18 % et 78,78 %.

À propos, dans les fichiers de style moderne qui utilisent une mise en page adaptative, les concepteurs de mise en page appropriés ajoutent de tels calculs sous forme de commentaires. Pour une meilleure clarté. Voici à quoi cela ressemble habituellement :

Contenu (
largeur : 68,75 % ; /* 660px / 960px */
}

J'espère qu'il n'y a aucune difficulté avec cela. Passons à autre chose !

Disposition basée sur une grille

Les exemples évoqués ci-dessus ne constituent bien entendu pas encore une grille. Eh bien, quel genre de grille à deux colonnes ? Cette grille modulaire est conçue pour aider les concepteurs et les maquettistes à créer des sites complexes avec de nombreuses colonnes et blocs individuels.

Par conséquent, de nombreux services et outils pratiques sont apparus qui mettent en œuvre cette méthode facilement et simplement. Par exemple, 960.gs. Ici, vous pouvez non seulement étudier visuellement le principe du balisage basé sur une grille modulaire, mais également télécharger des modèles et les utiliser.

En fait, ces services se vendent désormais à la pelle ! Ils sont également appelés frameworks. Choisissez celui que vous préférez. Voici une grande sélection de 30 frameworks CSS pour une conception Web réactive.

A quoi servent ces grilles modulaires ?

Tout d’abord, des grilles modulaires sont nécessaires pour organiser visuellement le contenu d’une page de site Web. Ce n’est pas seulement esthétique et agréable à l’œil de l’utilisateur, mais aussi pratique pour les développeurs eux-mêmes. Surtout si le site est vraiment complexe dans sa structure et son contenu.

De plus, de telles grilles modulaires sont beaucoup plus faciles à rendre adaptatives que des blocs dispersés aléatoirement de différentes tailles.

Et bien sûr, la vitesse de développement de tels sites est beaucoup plus élevée. Vous n’avez pas besoin de vous amuser et de réinventer la roue à partir de zéro. Tout ce que vous avez à faire est de choisir un framework approprié et de concevoir votre site Web en l’utilisant.

J'espère que vous savez maintenant ce qu'est une mise en page adaptative basée sur une grille modulaire.

La prochaine fois, nous parlerons d'images flexibles dans une mise en page réactive. Un sujet très important et controversé. Je recommande également de l'étudier à fond pour ne pas avoir d'ennuis. Restez connecté ! Mieux encore, abonnez-vous à la newsletter du blog Web Council.

Lorsqu’il s’agit de choisir une grille, de nombreuses options s’offrent à vous. Vous trouverez ci-dessous (et bien d’autres) que vous pouvez utiliser librement dans vos projets. Ces grilles CSS vous aideront à créer un magnifique site Web réactif en un rien de temps. A la fin de l'article se trouve un tableau comparant les grilles décrites ci-dessous.

1. Squelette

Squelette est un ensemble de fichiers CSS, ainsi qu'un modèle PSD pour les concepteurs Web. Ces fichiers, selon les auteurs de Skeleton, vous aideront à créer une mise en page réactive. Le squelette dispose également d’une réinitialisation de style, ce qui est pratique. Par défaut, le squelette est basé sur une grille de 960 px (pour les moniteurs de 980 px de large), les blocs squelettes ont une largeur fixe ; les blocs s'adaptent au navigateur en raison de l'espace autour du site ; Lors du changement de fenêtre du navigateur, le défilement horizontal n'apparaît pas.

Étant donné que les blocs ont une largeur fixe, cette grille peut être qualifiée d'adaptative et non réactive. Il est peu probable que je l'utilise.

2. Grille simple

Si vous êtes minimaliste, alors cette grille vous conviendra. La largeur de la grille par défaut ne dépasse pas 1 140 px. Selon les auteurs de la grille, créer un site avec une largeur maximale plus petite est une erreur. Contrairement au squelette grille simple se comporte de manière réactive et satisfait au concept de conception réactive. Comme déjà mentionné, la largeur maximale de la grille est de 1140 px, mais changer cette valeur n'est pas difficile, puisque tous les blocs de la grille sont définis en pourcentage : c'est ce que signifie le responsive design ! Dans le fichier CSS lui-même, il n'y a qu'une seule requête multimédia :
@mediahandheld, onlyscreenand (max-width: 767px) , ce qui peut être considéré comme un inconvénient.

En principe, la chose est pratique, mais au cours du développement, elle devra probablement être modifiée.

Simple Grid est la base d’une grille légère, mais Simple Grid n’est pas un framework CSS. Simple Grid manque de styles pour les boutons, les tableaux, les polices, etc. Simple Grid fonctionne avec deux types de grilles différents. Il existe une grille de contenu qui ressemble à

et une grille de mise en page qui ressemble à . Simple Grid prend également en charge les mises en page réactives. La grille comporte des colonnes en caoutchouc et la grille change également de taille en fonction de la taille de la fenêtre du navigateur. Pour les appareils mobiles, la grille dispose ses colonnes en pile, les unes en dessous des autres.

Paramètres de grille simples

Les paramètres de base de Simple Grid sont similaires à ceux de toute autre grille. Vous devez d’abord envelopper votre grille dans un div avec une classe de grille. Si vous souhaitez que la grille ait un remplissage de 20 pixels, ajoutez une classe grid-pad. Ensuite, en fonction de vos préférences de taille de grille, ajoutez les classes souhaitées. Par exemple, si vous souhaitez une grille avec une colonne de gauche et un bloc principal (pour le contenu), utilisez le code suivant :

HTML

Si vous souhaitez obtenir 4 colonnes (pour le contenu), vous pouvez utiliser un code comme celui-ci :

HTML

La première colonne (pour le contenu) de notre grille est toujours faite pour flotter par rapport au bord gauche du bloc wrapper. Si vous souhaitez que la colonne flotte par rapport au bord droit, ajoutez la classe push-right.

Par exemple, les astuces CSS fonctionnent sur la base de Simple Grid.

Articles connexes :

• traduction de l'article « Ne réfléchissez pas trop aux grilles » sur habrahabr.ru - Des grilles sans problèmes

3. Grille profonde

Grille profonde vous permet d'afficher la mise en page de manière extrêmement précise dans la plupart des navigateurs. Comment ont-ils pu faire de tels progrès pour une mise en page responsive ? La grille profonde utilise des marges négatives lors du calcul de la taille des colonnes.

4. Plaque chauffante

Plaque(github.com/necolas/griddle) est une grille destinée aux concepteurs Web ciblant les navigateurs modernes (IE8+). Le fichier CSS est généré à l'aide des fonctions et des mixins Sass. L'utilisation des propriétés inline-block et box-sizing donne à la mise en page de nouvelles fonctionnalités par rapport aux mises en page basées sur des blocs flottants. Inconvénients : la grille n'a pas de fichier css, seulement sass ; L'exemple ne peut pas être téléchargé ; seulement du culot.

5. Grilles réactives extra résistantes

Si vous sentez que d'autres grilles CSS vous limitent, si votre priorité est un contrôle total sur la façon dont votre mise en page réactive s'adapte aux différents écrans, si vous êtes préoccupé par les noms de classe dans votre CSS, alors cela pourrait vous être utile. Grilles réactives extra résistantes..

6. Grilles proportionnelles

Cette solution CSS résout un problème qui se pose très souvent lors de la mise à l'échelle de notre mise en page, à savoir : les tailles disproportionnées de gouttières qui en résultent pour différentes fenêtres. Les grilles proportionnelles vous permettent d'utiliser des tailles fixes pour vos gouttières tout en vous permettant d'utiliser des colonnes en caoutchouc.

L'idée de l'auteur est la suivante : l'auteur utilise la propriété box-sizing, qui permet de créer des espaces fixes avec les colonnes. L'espacement entre les colonnes est le même pour chaque point d'arrêt spécifique et dépend de la taille de police de base.

7. Propre

La description apparaîtra plus tard

8. grilles csswizardry

La description apparaîtra plus tard

9. Grille simple et morte

La description apparaîtra plus tard

10. Système de grille réactif

La description apparaîtra plus tard

Bienvenue dans le garde-manger design !

Je m'appelle Andrey Gavrilov et je suis heureux de vous accueillir dans mon nouveau spectacle au format inhabituel.

Pourquoi un nom si étrange ? Un débarras est un lieu où est rassemblé tout ce qu'une personne a accumulé, ce qui lui est cher et la définit en tant que personne.

Mettons ensemble une compétence, un secret ou une compétence utile dans notre garde-manger de conception commun chaque semaine.

Grilles modulaires

Cet article est rédigé sous la forme d'un résumé basé sur les éléments de cette vidéo :

Aujourd'hui, nous aborderons l'une des questions les plus importantes dans le travail d'un concepteur de sites Web moderne. Ce sont des grilles modulaires. Je suis bombardé quotidiennement de questions sur quel maillage utiliser ? Dans quels cas dois-je utiliser 12 colonnes, 14 colonnes, 1 170 px ou 960 px, ou peut-être 940 px ?

Aujourd'hui, nous aborderons toutes ces questions dans une leçon simple.

Allons-y...

Des grilles modulaires sont nécessaires dans le travail d'un concepteur de sites Web afin de rendre les informations sur la page plus structurées et logiquement situées. Il est impossible d'imaginer une page responsive moderne sans une grille modulaire. Son utilisation est donc une norme dans le travail d’un web designer. Il existe de nombreuses opinions, questions et confusions qui terrifient les nouveaux concepteurs Web lorsqu'ils commencent à travailler avec des grilles modulaires. Aujourd'hui, je vais essayer de répondre à toutes ces questions.

Point d'arrêt

La première chose que vous devez savoir concerne un concept tel que le point d'arrêt. Peut-être n'avez-vous même pas entendu parler de lui. C’est ce qu’on appelle le point de rupture. Il caractérise le passage d'un site d'un état à un autre, car le site apparaît différemment sur un mobile, une tablette ou un ordinateur de bureau. À cette fin, il existe précisément ce point de rupture, le « point d'arrêt », dans lequel la conception du site passe d'un appareil mobile à une tablette, d'une tablette aux petits ordinateurs de bureau, du petit au grand.

Pour voir avec un exemple ce qu'est un point d'arrêt et comment fonctionne l'adaptabilité, vous pouvez ouvrir n'importe quel site Web réactif (adaptatif). Voici mon site personnel andrewgavrilov.me, vous pouvez y accéder et le tester de la même manière. Sur mon bureau avec une résolution de 1600px, le site ressemble exactement à ceci.

Ouvrons les outils de développement dans Chrome sur le moniteur. Si vous ne savez pas comment le démarrer, assurez-vous de le rechercher sur Google, car je ne voudrais pas être distrait par des points aussi fondamentaux pour le moment. Alors, ouvrez les outils de développement et voyez à quoi ressemble notre site sur différents appareils. Cet outil nous permet de tester l'apparence du site sur des appareils mobiles avec une résolution de 320px, 375px de longueur, etc. Sur les petits ordinateurs de bureau, mon site ressemble à ceci.

Sur les tablettes 768px, les outils de développement nous montrent que le site ressemble à ceci.

Sur les gros appareils mobiles, avec une résolution de 420px pixels de longueur, le site est reconstruit, et c'est ici, entre ces deux résolutions, que se produit le point d'arrêt.

Par conséquent, vous décidez vous-même du nombre de points d'arrêt que le site doit avoir et, en conséquence, pour chacun des états, vous préparez une mise en page. Les grilles modulaires nous y aident.

Amorçage

En règle générale, un site ne comporte que 2 ou 3 points d'arrêt. Jetons un coup d'œil au site Web du framework le plus populaire auprès des développeurs.

C’est devenu si populaire aujourd’hui qu’il s’agit essentiellement de la norme. Tous les développeurs et concepteurs de mise en page travaillent spécifiquement dans ce cadre. Je n'entrerai pas dans les détails et vous dirai de quoi il s'agit, je dirai seulement que ce framework particulier accélère la mise en page, et qu'il a ses propres caractéristiques techniques. Par conséquent, il est considéré comme normal, voire standard, si vous concevez votre conception à l'aide de grilles modulaires qui suivent Bootstrap.

Ne vous inquiétez pas si vous ne le saviez pas, vous préparez déjà quelques mises en page et vous devrez maintenant les mettre en page pour Bootstrap. N'importe quelle grille peut être convertie en Bootstrap, reconfigurée, et il existe un onglet séparé pour cela. La première chose que vous devez comprendre est que même si votre grille est unique, elle peut toujours être refaite pour Bootstrap. L'essentiel est que le maquettiste comprenne comment procéder.

Passons à l'onglet CSS et à la section Grid System.

Il y a un tableau ici qui vous indique les plages de résolution par défaut proposées par Bootstrap. Disons simplement que vous comprenez qu'un site Web réactif est un site Web qui s'affiche également bien sur tous les appareils mobiles, mais comme il existe de nombreux appareils mobiles et que chacun a des résolutions différentes, nous ne pouvons pas préparer de mises en page pour chaque téléphone individuel. Par conséquent, nous prenons les gammes et préparons une mise en page pour chacune d’elles.

Bootstrap considère les très petits appareils comme des téléphones avec une résolution inférieure à 768 pixels, donc dans la plage de 0 à 768, nous préparons la première mise en page. Viennent ensuite les petits appareils - les tablettes, dont la résolution est supérieure à 768 px, mais inférieure à 992 px, puis les appareils de taille moyenne (ordinateurs de bureau) commencent à partir de 992 px. Et les appareils avec une résolution supérieure à 1 200 px sont considérés comme de gros appareils (grands ordinateurs de bureau).

Il s'avère donc que pour un projet, nous préparons en moyenne 4 mises en page. Mais je vais vous dire un secret : le plus souvent, seulement trois suffisent - pour les mobiles, pour les tablettes et les ordinateurs de bureau, où vous pouvez préparer une mise en page qui ouvrira des bureaux très grands et réguliers. Si nous comprenons que nous préparons des mises en page pour des plages, alors pour quelle taille spécifique devons-nous créer la mise en page, car Photoshop fonctionne avec des statiques, il ne s'agit pas de graphiques dynamiques. Par conséquent, il est nécessaire de savoir clairement quelle sera la taille de notre mise en page.

Je vais vous confier un deuxième secret qui vous rassurera : il n'y a pas de normes. Si nous couvrons la plage, par exemple, de 320 px à px, vous pouvez préparer une mise en page pour 320 px, 768 px, 322 px, 327 px.

Comprenez-vous quel est le but ? Il n'y a aucune différence.

C'est pourquoi j'ai spécialement préparé pour vous des dossiers, des grilles modulaires avec lesquelles vous travaillerez. J'utilise ces grilles modulaires dans mon travail. Vous pouvez également en télécharger des similaires.

L’essentiel pour vous est que votre mise en page, qui mesure environ 480 pixels de long, se situe dans la plage couverte par cette grille particulière. Vous pouvez déjà travailler dans cette grille à votre guise. À propos, pour activer ou désactiver les guides, vous devez utiliser la combinaison de touches ctrl+H.

Les guides forment une grille et vous pouvez les publier vous-même, mais comme cela prend beaucoup de temps et n'est pas pratique, le moyen le plus simple est de télécharger les modèles que je vous propose.

Voici un modèle pour les petits appareils de plus de 768 pixels.

Les appareils moyens mesurent plus de 992 px.

Et grand, plus de 1170px.

J'utilise cette valeur dans la mise en page, que ce soit à 1170px ou 1200px - cela n'a pas d'importance, car il s'agit de la largeur de l'appareil, pas de la grille. Ceux. la grille peut être n'importe laquelle pour cette largeur d'appareil. Ne vous embêtez pas et utilisez simplement ces grilles dans votre travail.

J'utilise généralement des grilles de très petits appareils et de grands appareils. Ce sont les trois gammes que je couvre, et ce sont les deux points de rupture : le passage du mobile aux tablettes, des tablettes aux ordinateurs de bureau.

Je pense que nous avons tout compris en ce qui concerne les grilles modulaires et la manière dont elles sont formées et utilisées. Surtout, n’ayez pas peur d’utiliser ceux qui vous plaisent !

Travailler avec des grilles modulaires

Le deuxième point est maintenant de savoir comment travailler avec des grilles modulaires. Il existe une opinion à laquelle adhèrent beaucoup de gens et qui tient à distance les concepteurs débutants : chaque élément doit occuper un nombre clairement défini de colonnes, commencer à une extrémité des colonnes, se terminer à l'autre - et seulement cela. Si nous faisions tous nos créations de cette façon, elles seraient ennuyeuses, monotones et sans intérêt. C'est pourquoi la grille est pour vous un élément de guidage, d'incitation, mais en aucun cas de dictée, et il est important de le comprendre.

Les principes de base sont les suivants : il y a ici un calque que je cache parfois, parfois je montre, mais le plus souvent il est caché.

Les rayures bleues sont des colonnes, nous y travaillons. Il existe entre eux des écarts dans lesquels nous n’avons pas le droit de grimper. Mais on y arrive, et je vais vous montrer à quels moments. L'essentiel est que notre élément ne commence jamais entre deux colonnes,

Son bord ne peut pas commencer à l'intérieur d'un espace, mais uniquement à l'intérieur d'une colonne. L'état idéal est celui où l'élément commence au bord d'une colonne.

Si vous pouvez faire cela, alors c'est génial. Mais le plus souvent, les éléments ne peuvent pas toujours être attachés au bord et des différends commencent sur la complexité de la mise en page et les mouvements supplémentaires dans le code.

En fait, non, c'est juste une ligne de code, alors ne vous inquiétez pas si votre élément ne commence pas par le bord gauche de la colonne. S'il ne se termine pas au bord droit de la colonne, ce n'est pas non plus un problème. Vous pouvez simplement essayer de le « tirer » pour qu’il se termine dans la colonne.

Afin de ne pas être sans fondement, je vais vous montrer un petit exemple qui dissipera la plupart de vos doutes. J'ai préparé une image standard qui peut être vue dans l'en-tête de n'importe quel site Web - logo, barre de menus, numéro de téléphone et n'importe quel bouton.

Cette localisation par rapport à la grille modulaire est tout à fait correcte. Tout n'est pas parfait ici - le menu ne se termine pas au bord droit de la colonne, le téléphone ne démarre pas et ne se termine pas aux bords des colonnes, le bouton n'atteint pas le bord de la colonne. Pouvez-vous imaginer si tout le monde utilisait la même grille et que tout le monde avait les mêmes longueurs d'éléments ? Il est donc tout à fait normal de se retrouver dans cette situation.

Le problème sera si vous procédez comme ceci :

Ce n'est plus très bon. Le menu démarre dans l'espace, le téléphone démarre dans l'espace. Ce n'est pas le fait que cela se termine entre les deux, mais c'est ce qui commence là qui constitue vraiment le problème. Bien entendu, tout cela peut se jouer en mise en page. Mais cela reste analphabète et non professionnel. Assurez-vous qu'il n'y a pas de tels moments dans votre travail.

Ne vous inquiétez pas trop, tout viendra avec l’expérience. C’est juste que beaucoup de gens ont peur de la présence d’une grille modulaire et doivent se soucier de chaque pixel. Oui, le perfectionnisme est une bonne chose dans notre métier, mais il ne faut pas être trop zélé au profit des grilles modulaires.

J'espère que vous avez pu comprendre ce que sont les grilles modulaires, comment les utiliser correctement, quand, où et pourquoi.

En conclusion

On se retrouve dans une semaine, dans une nouvelle vidéo, dans un nouvel épisode de "Pantry Design". Et pour que je comprenne que vous aimez ce format, à quel point cette vidéo est utile, levez le doigt, abonnez-vous à la chaîne et laissez vos commentaires. Je saurai alors ce qui vous intéresse et je répondrai à vos questions.

De nos jours, il existe des cadres pour tout, et il semble qu'une fois que vous en aurez compris un, un autre prendra sa place. Cela est particulièrement vrai pour les frameworks CSS de grille réactifs, et tout le monde se considère comme « le meilleur ». Cette surabondance d’informations prête à confusion.

Prenons du recul, respirons profondément et demandons-nous : allons-nous vraiment utiliser les 24 options, et un million de leurs combinaisons, que nous offre « This Coolest Framework » ? Nous avons souvent besoin d’une solution simple et flexible, avec un nombre limité de variantes et avec une base de code que nous pouvons étendre à tout moment. Je souhaite parler de quatre techniques d'implémentation de grilles CSS, qui sont toutes facilement extensibles. Voici les quatre manières :

1. Disposition de grille adaptative n° 1 (utilisant un remplissage négatif)
2. Disposition de grille adaptative n°2 (en utilisant le dimensionnement de la boîte : border-box)
3. Disposition de grille adaptative basée sur l'affichage du tableau
4. Disposition de grille réactive basée sur Flexbox

Je simplifierai la description de ces méthodes et utiliserai un minimum de CSS simple et compréhensible. Chaque méthode aura une démo sur CodePen.

CSS général

Avant de plonger dans chaque méthode, examinons les styles courants que nous utiliserons dans les exemples. J'utiliserai la déclaration box-sizing: border-box pour tous les éléments du document, et j'ajouterai également une classe .clearfix pour effacer les boîtes flottantes. Voici notre CSS de base :

/* réinitialiser les propriétés */ *, *:before, *:after ( box-sizing: border-box; ) .clearfix:after ( content: ""; display: table; clear: les deux; )

Méthode 1 : utiliser un remplissage négatif

Cette méthode est basée sur l'utilisation d'un remplissage négatif pour créer des blocs de grille avec un remplissage fixe entre les blocs. La taille du remplissage négatif varie en fonction de la position du bloc dans la grille, mais la distance entre les blocs reste constante. Regardons le balisage :

/* grille */ ( margin-bottom: 20px; ) :last-child ( margin-bottom: 0; ) ( ) @media all and (min-width: 768px) ( /* all cols margin */ ( margin-right : 20px; ) :last-child ( margin-right: 0; ) /* rend les colonnes adaptatives */ .col-1-2 ( float: left; width: 50%; ) .col-1-4 ( float: gauche ; largeur : 25 % ; ) .col-1-8 ( float : gauche ; largeur : 25 % ; ) /* 2 lignes étendues */ .row-2 ( padding-left : 20px ; ) .row-2 :premier - enfant (marge-gauche : -20px; ) /* 4 lignes étendues */ .row-4 ( padding-left : 60px; ) .row-4 :premier-enfant (marge-gauche : -60px; ) /* 8 s'étendent sur les lignes */ .row-8 ( padding-left : 60px; ) .row-8 :nth-child(4n+1) ( margin-left : -60px; ) .row-8 :nth-child(5n-1 ) ( margin-right : 0 ; ) .row-8 :nth-child(6n-1) ( clear : les deux ; ) ) @media all et (min-width : 1200px) ( /* ajuster la largeur */ .col- 1 -8 ( float : left ; width : 12,5% ; ) /* 8 lignes étendues */ .row-8 ( padding-left : 140px; ) /* réinitialiser ces... */ .row-8 :nth-child ( 4n+1) ( marge-gauche : 0; ) .row-8 :nth-child(5n-1) ( marge-droite : 20px;

) .row-8 :nth-child(6n-1) ( clear: none; ) /* et ajoutez ceci */ .row-8 :nth-child(1) ( margin-left: -140px; ) )

Comme vous pouvez le voir, dans les conditions de requête multimédia, une valeur d'indentation fixe (appelons-la x) est multipliée par le nombre de colonnes dans la ligne moins 1 (n-1), et cette indentation est appliquée à la ligne de gauche. . Chaque colonne, sauf la dernière, a une indentation droite fixe (x). Et la première colonne de la ligne reçoit une indentation négative (n-1)*x

Certains calculs sont nécessaires et la méthode devient peu pratique à mesure que le nombre de colonnes augmente. De plus, à mesure que nous augmentons le nombre d'étapes (le nombre de gradations des media queries, par exemple, 1 colonne par ligne, 4, 8...), nous devons réinitialiser le CSS, et nous devons utiliser beaucoup de calculs mathématiques.

Un autre bug intéressant apparaît lorsque nous avons beaucoup d'éléments flottants. La quantité totale d'indentation peut se combiner à un moment donné et les éléments seront renvoyés sur une nouvelle ligne. Cela peut être vu dans le cas de 8 colonnes. Si vous modifiez la condition de la dernière requête multimédia sur une largeur minimale inférieure à 1 200 px, vous pouvez voir ce bug en action. Rappelez-vous ceci. Mais cette méthode a aussi ses avantages.

Avantages et utilisation dans la pratique

La vraie beauté de cette méthode est la création de combinaisons de grilles de taille fixe/variable. A titre d'exemple, imaginons une zone de contenu principale de largeur variable, et une zone latérale supplémentaire de largeur fixe. Notre code HTML pourrait ressembler à ceci :

Et le CSS est comme ceci :

/* balisage */ .primary ( margin-bottom: 20px; ) @media all et (min-width: 600px) ( .container ( padding-right: 300px; ) .primary ( float: left; padding-right: 60px; largeur : 100 % ; ) .secondaire ( float : droite ; marge droite : -300 px ; largeur : 300 px ; ) )

Voici une démo du code en action sur CodePen :

Méthode 2 : utilisez le dimensionnement de la boîte : border-box

Cette méthode utilise toute la puissance du dimensionnement de boîte : border-box . Puisque cette propriété nous permet d'ajouter des marges à un élément sans que leur valeur n'affecte la largeur totale de l'élément, nous pouvons toujours obtenir une grille flexible avec un « remplissage » fixe. Mais ici, au lieu d’utiliser la propriété margin, nous utiliserons des marges internes, qui feront office de remplissage entre les éléments de la grille.

Balisage :

Nous allons ignorer les calculs ahurissants ici, notre CSS sera donc très simple. Et le voici, avec la possibilité de disposer jusqu'à 8 colonnes :

/* grille */ .row ( margin: 0 -10px; margin-bottom: 20px; ) .row:last-child ( margin-bottom: 0; ) ( padding: 10px; ) @media all et (min-width: 600px) ( .col-2-3 ( float : gauche ; largeur : 66,66 % ; ) .col-1-2 ( float : gauche ; largeur : 50 % ; ) .col-1-3 ( float : gauche ; largeur : 33,33%; ) .col-1-4 ( flotteur : gauche ; largeur : 25 % ; ) .col-1-8 ( flotteur : gauche ; largeur : 12,5 % ; ) )

Des marges négatives à droite et à gauche sur chaque ligne sont nécessaires pour compenser les marges des colonnes. À la largeur minimale spécifiée par la requête multimédia, nos éléments de grille prennent leur propre largeur et flottent dans leurs conteneurs. Vous pouvez modifier cette largeur à votre guise ou spécifier différentes requêtes multimédias pour différents groupes d'éléments de grille.

Développons cette méthode :

Disons que vous souhaitez que les éléments .col-8 soient d'abord divisés en 4 par ligne, puis en 8 par ligne. C'est assez simple à mettre en œuvre si vous y réfléchissez un peu. Pour le balisage ci-dessus, notre CSS ressemblerait à ceci :

@media all and (min-width: 600px) ( .col-1-8 ( float: left; width: 25%; ) .col-1-8:nth-child(4n+1) ( clear: les deux; ) ) @media all et (min-width : 960px) ( .col-1-8 ( width : 12,5%; ) .col-1-8:nth-child(4n+1) ( clear : none; ) )

Méthode 3 : utiliser l’affichage sous forme de tableau

Cette méthode implémente le bon vieux comportement des tables, mais sans casser la sémantique ou la structure. Dans cette méthode, les éléments visibles sont affichés sous forme de blocs par défaut. Mais à certaines tailles, les lignes de la grille deviennent des tableaux et les colonnes des cellules de tableau. Jetons un coup d'œil au balisage - il est similaire à celui de la deuxième méthode, mais nous n'avons pas besoin de .clearfix ici :

Et, en conséquence, CSS :

/* grille */ .row ( margin: 0 -10px; margin-bottom: 10px; ) .row:last-child ( margin-bottom: 0; ) ( padding: 10px; ) @media all et (min-width: 600px) ( .row ( affichage : tableau ; disposition du tableau : fixe ; largeur : 100 % ; ) ( affichage : cellule du tableau ; ) /* définir les largeurs des colonnes */ .col-2-3 ( largeur : 66,66 % ; ) .col-1-2 ( largeur : 50 % ; ) .col-1-3 ( largeur : 33,33 % ; ) .col-1-4 ( largeur : 25 % ; ) .col-1-8 ( largeur : 12,5 % ; ) )

Cette méthode peut paraître déroutante, mais elle présente des avantages. Pour commencer, nous ne brisons pas la sémantique en utilisant des tables traditionnelles, et nous n'avons pas besoin de nettoyer les blocs flottants. Colonnes de même hauteur - facile. Une combinaison de colonnes fixes et de colonnes à largeur variable ? Aucun problème. L’option d’affichage tabulaire pose ses propres problèmes, et parmi les quatre méthodes, c’est celle que je préfère le moins. Malgré le fait que dans certains cas, c'est une bonne option.

Méthode 4 : Flexbox

La dernière méthode que je vais décrire utilise le module flexbox. Selon MDN :

CSS3 Flexible Box, ou flexbox, est un mode de mise en page qui offre la possibilité d'organiser les éléments sur une page afin qu'ils se comportent de manière prévisible sur différentes tailles d'écran et différents appareils.

Flexbox offre de nombreuses options différentes, nous offrant un puissant arsenal d'options de mise en page différentes. Rendre un module flexbox réactif ne pourrait pas être plus simple. Comme auparavant, notre balisage ressemble à ceci :

Regardons maintenant notre nouveau CSS :

/* grille */ .row ( display: flex; flex-flow: retour à la ligne; margin: 0 -10px; margin-bottom: 10px; ) .row:last-child ( margin-bottom: 0; ) ( padding: 10px ; largeur : 100 % ; ) @media all et (largeur minimale : 600 px) ( /* définir les largeurs des colonnes */ .col-2-3 (largeur : 66,66 % ; ) .col-1-2 (largeur : 50 % ; ) .col-1-3 ( largeur : 33,33 % ; ) .col-1-4 ( largeur : 25 % ; ) .col-1-8 ( largeur : 12,5 % ; ) )

Dans ce cas, pour les lignes, vous devez définir la propriété display sur flex et également spécifier la propriété flex-flow. Une définition complète et une description de ces propriétés sont disponibles dans la documentation MDN pour flexbox. Pour une requête multimédia, nous modifions simplement la largeur des colonnes et laissons flexbox faire le reste pour nous.

Conclusion

Nous avons examiné 4 façons de créer des grilles réactives à l'aide de CSS, chacune ayant ses propres avantages et inconvénients. Il n’existe pas de manière absolue de faire quelque chose, et je me retrouve souvent dans des situations où une méthode est meilleure qu’une autre, ou je dois combiner plusieurs options. Les méthodes 1 et 2 sont mes préférées et je les utilise souvent dans mes projets (mise en page de base en utilisant la méthode 1 et grilles adaptatives en utilisant la méthode 2).

Comme mentionné précédemment, la troisième méthode a ses avantages, mais je préfère utiliser la disposition des tableaux uniquement lorsque cela est strictement nécessaire. La méthode 4 est géniale et j'ai hâte de la transférer à tous mes projets. Flexbox gagne du terrain, mais il n'est pris en charge que dans IE10 et versions ultérieures. Il existe des polyfills pour cela, mais je préfère m'en passer. Bien qu'il existe aujourd'hui des scénarios dans lesquels flexbox serait une excellente solution (par exemple, dans les navigateurs mobiles où IE n'est pas présent).

Chacune de ces méthodes est facilement évolutive et extensible. À l'aide des idées présentées, vous pouvez facilement personnaliser votre propre mise en page réactive avec le placement souhaité des éléments de grille avec un minimum de CSS. Le module CSS Grids est en route, mais il faudra un certain temps avant de pouvoir l'utiliser. J'espère que vous avez apprécié l'article et que vous êtes désormais moins intimidé par l'utilisation des grilles CSS.