Mise en page sur grille en CSS. Guide complet et référence. Conception de grille ou mise en page de grille

Dans cet article, vous trouverez un cours complet sur les grilles CSS. Nous analyserons ce que c'est, quelles sont les différences avec FlexBox et comment vous pouvez travailler avec CSS Grid.

Les grilles CSS sont une nouvelle approche pour créer des sites Web réactifs avec plusieurs blocs situés n'importe où sur le site. En dehors de Grille CSS il existe également une technologie très similaire aux grilles. Nous ne traiterons pas des plus petites différences entre eux, car cela nécessitera un article séparé, mais nous décrirons brièvement les principales différences.

Grille CSS peut être appelé une version plus cool et améliorée boîte flexible, car FlexBox vous permet de travailler uniquement dans un seul plan : soit créer des colonnes, soit créer des lignes.

Les grilles CSS vous permettent d'en faire plus car elles fonctionnent dans les deux plans en même temps. Ainsi, la création de blocs adaptatifs du site est beaucoup plus facile, et les possibilités d'agencer les objets comme vous le souhaitez sont tout simplement infinies.

Nous vous invitons à regarder une vidéo complète sur l'apprentissage des grilles CSS pour comprendre instantanément l'essence Grille CSS:

• Leçon sur ;

Au cours de la leçon, trois pages ont été créées, vous pouvez recopier le code de chaque page ci-dessous.

Premier fichier

Deuxième fichier

Troisième fichier

Principe d'opération

Travailler avec des grilles est très simple. L'algorithme des actions ici est le suivant:

1. Nous créons un bloc principal et y plaçons d'autres blocs ( sections);
2. Ajoutez la propriété display: grid au bloc principal ;
3. Les propriétés de grille CSS peuvent maintenant être appliquées à tous les éléments du bloc principal ;
4. Ajout de diverses propriétés. Documentation sur toutes les propriétés possibles que vous pouvez ;

Chaque bloc peut être défini en largeur, hauteur, son emplacement. Les blocs créés sur la base de grilles ont immédiatement une conception adaptative qui ajuste les blocs à différentes résolutions d'écran.

Ainsi, vous pouvez écrire moins et obtenir plus. Quoi d'autre pourrait être plus cool? Partagez votre expérience d'utilisation des grilles dans vos projets dans les commentaires de cet article. ⇣

J'ai remarqué la technique de la grille il y a environ un an. Puis cette technique, après une étude très superficielle, m'a semblé inutile et très expérimentale, j'ai été rebuté par le fait qu'il fallait créer du balisage supplémentaire pour les implémentations. Mais maintenant, il devient difficile de ne pas remarquer le nombre de sites Web construits sur la grille, ainsi que le nombre d'articles et de tutoriels à ce sujet. Grâce à ce dernier, il est devenu beaucoup plus facile d'étudier et de comprendre les principes et le concept, de faire plus ou moins conclusions réelles. Ma conclusion après un an est la suivante : "C'est une solution simple et utile qui n'a jamais été créée pour la mise en page de pages Web, tout concepteur de sites Web qui se respecte devrait savoir."

Tous ceux qui ont déjà travaillé avec une grille savent ce qu'est une grille. éditeurs graphiques (Photoshop, Fireworks, Gimp, etc.) et, bien sûr, apprécié sa nécessité dans la création de tout design. Mais comment mettre en place le Grid sur le web ? En réalité Tabulaire la mise en page était une véritable conception de page Web Grid, sans aucun doute très confortable. Mais pas l'utilisation prévue des éléments table horrifié.
Heureusement, l'énorme popularité des normes Web qui a augmenté et continue de croître ces dernières années, ainsi que leur prise en charge par les navigateurs modernes, nous a donné la possibilité de créer des pages riches en fonctionnalités avec très peu de balisage logique. Cette mise en page s'appelle bloquer. Mais aussi En bloc la mise en page s'est avérée côté faible. Lors de la création de pages avec un vaste ensemble d'éléments de différentes tailles et significations, le balisage de ces pages est devenu une tâche très difficile, et si plus d'une personne travaille sur le balisage, un tel travail peut devenir un cauchemar.
Et ici la technique utilisant la Grille est venue à la rescousse. Cette technique est un hybride entre En bloc Et Tabulaire disposition. Son utilisation nous donne :

• rapidité et facilité de développement
• liberté de positionnement
• proportionnalité des éléments de la page et leur placement

Payer pour tout cela n'est qu'une petite majoration supplémentaire. Je pense que ces jours-ci, lorsque le coût d'une montre pour homme est beaucoup plus cher que le fer et la performance, il est facile de deviner dans quel sens la balance penche.

Qu'est-ce que la mise en page de la grille ? C'est avant tout un concept. Un concept qui comprend beaucoup d'aspects de conception et très peu de règles pour sa mise en œuvre. Cela donne une liberté totale et aucune standardisation dans son exécution. Je dirai même plus - la même grille peut être mise en œuvre par le plus différentes façons. Si vous avez déjà lu sur la Grille, vous avez peut-être remarqué que chaque auteur part d'un nouveau côté, plongeant loin dans les détails, c'est, pour le moins, déroutant. Heureusement, ils ont commencé à apparaître. Systèmes de grille- Bibliothèques CSS pour travailler avec la grille. Et par leur exemple, vous pourrez très vite maîtriser les principes de base de cette technique.

Je pense que cela n'a aucun sens d'écrire sur tous les aspects de la Grille, vous pouvez facilement trouver des informations à ce sujet sur Internet. Je propose de créer mon propre simple Système de grille.

Vous devez d'abord comprendre que la grille se compose de colonnes et d'espaces entre elles. Les trois valeurs principales sont la largeur de la grille, la largeur des colonnes et l'espacement des colonnes. La largeur des colonnes dépend de leur nombre.

Essayons de créer une grille de 950 pixels de large en 16 colonnes avec des espaces de 10 pixels, donc une colonne doit avoir une largeur de 50 pixels. Après avoir compris toutes les valeurs, nous ouvrons n'importe quel éditeur graphique que nous connaissons et créons une mise en page. Vous pouvez également ajouter des retraits à la grille à partir de la gauche et de la droite, disons 20 pixels chacun, et cela se traduit par une mise en page d'une largeur de 990 pixels. Vous pouvez voir mon exemple.

Nous pouvons maintenant commencer à construire notre bibliothèque. Comme la plupart des bibliothèques CSS, la nôtre a besoin d'une réinitialisation globale, je suggère la réinitialisation CSS d'Eric Meyer, en sauvegardant réinitialiser.css créer grille.css dans lequel nous pouvons immédiatement ajouter une méthode de nettoyage des conteneurs contenant des blocs flottants - Clear Fix. La première chose dont nous avons besoin est une règle de conteneur qui contiendra toutes nos colonnes. La largeur de chaque conteneur correspond exactement à la largeur de notre grille.

.récipient(
marge : 0 automatique ;
largeur : 950px
}

Maintenant, nous pouvons ajouter une règle pour nos colonnes, elle contient la largeur et le rembourrage. L'indentation agit comme un espace (gouttière) entre les colonnes.

.colonne(
flotteur : gauche ;
marge droite : 10 px ;
débordement caché;
largeur : 50px
}

Pour la dernière colonne, l'indentation n'est pas nécessaire, pour cela nous ajouterons une règle :

Nos conteneurs contiennent des colonnes, les colonnes sont des blocs flottants, il faut donc les nettoyer. Pour éviter les .clearfix inutiles dans le balisage, vous pouvez également appliquer cette règle aux conteneurs :

.clearfix : après, .container : après{
contenu: ".";
bloc de visualisation;
hauteur : 0 ;
clarifier les deux;
visibilité : masquée ;
}

clearfix, .récipient(affichage : bloc en ligne ;)

/* Masque depuis IE-mac \*/
* html.clearfix, *html.container(hauteur : 1 % ;)
.clearfix, .récipient(bloc de visualisation;)
/* Fin du masquage depuis IE-mac */

Nous pouvons maintenant commencer nos colonnes. Les colonnes peuvent être larges de deux à trois, et ainsi de suite. Pour ce faire, on peut leur appliquer les règles suivantes :

.span-1 ( largeur : 50px; )
.span-2 ( largeur : 110px; )
.span-3 ( largeur : 170px; )
.span-4 ( largeur : 230px; )
.span-5 ( largeur : 290px; )
.span-6 ( largeur : 350px; )
.span-7 ( largeur : 410px ; )
.span-8 ( largeur : 470px ; )
.span-9 ( largeur : 530px ; )
.span-10 ( largeur : 590px ; )
.span-11 ( largeur : 650px; )
.span-12 ( largeur : 710px ; )
.span-13 ( largeur : 770px ; )
.span-14 ( largeur : 830px; )
.span-15 ( largeur : 890px ; )
.span-16 ( largeur : 950px ; marge droite : 0 ; )

En principe, c'est tout ce qui est nécessaire pour les implémentations de Grid, vous pouvez également ajouter un wrapper et une classe pour afficher la Grid avec une mise en page. créons main.css et y ajouter :

.emballage(
marge : 0 automatique ;
largeur : 990px
}
.recouvrir(
arrière-plan : url transparent (overlay.png) défilement répétitif en haut à gauche ;
}

Voici à quoi pourrait ressembler la mise en page :

Je pense que c'est suffisant pour commencer.
Vous pouvez voir mon exemple

De l'auteur : lors de la création de sites complexes, les grilles sont d'une grande importance. Leur importance dans la conception Web moderne devient évidente lorsque vous regardez le nombre de frameworks qui implémentent cette technologie pour accélérer le développement.

Après vous être familiarisé avec la spécification CSS Grid Layout, vous n'avez plus besoin fichiers individuels styles si vous souhaitez travailler avec le système de grille. Un avantage tout aussi important est que vous ne comptez plus sur les propriétés en ligne et flottantes pour positionner les éléments sur la page. Dans ce didacticiel, nous allons apprendre les bases des systèmes de grille et créer une mise en page de blog simple.

Prise en charge du navigateur

Sur le ce moment seuls IE 10+ et Edge prennent en charge la spécification Grid Layout - sites commerciaux cette technologie ne peut pas encore être utilisé.

Dans Chrome, cette option peut être activée via le drapeau "Fonctionnalités de la plate-forme Web expérimentale" dans chrome://flags. Dans Firefox, l'indicateur layout.css.grid.enabled.

Une autre option consiste à utiliser un polyfill, et oui, le CSS Grid Polyfill existe ! Vous pouvez utiliser l'une des trois options décrites et apprendre Grid Layout alors qu'il en est encore à ses premiers stades de développement.

Veuillez noter : IE fonctionne actuellement ancienne version spécification, ce qui signifie que le navigateur ne prend pas entièrement en charge la nouvelle spécification. Lorsque nous arrivons aux exemples, je vous recommande d'utiliser Chrome ou Firefox.

Terminologie du système de grille

En ce qui concerne le positionnement des éléments, les systèmes CSS Grid sont comme des tableaux. Cependant, cet outil est beaucoup plus puissant et diversifié. Dans cette section, je couvrirai quelques termes dont vous devrez vous souvenir lorsque vous travaillez avec des grilles :

Unités fr : elles sont utilisées pour définir la quantité d'espace libre. Utilisé conjointement avec les lignes de grille et les colonnes de grille. D'après la spécification : "L'allocation d'espace ne se produit qu'après que toutes les "longueurs" ou tailles de lignes et de colonnes avec du contenu ont été atteintes. dimensions maximales»

Lignes : les lignes marquent les limites des autres éléments. Ils sont à la fois horizontaux et verticaux. Dans l'image ci-dessous, il y a 4 lignes verticales et 4 horizontales.

Pistes : les pistes sont l'espace entre des lignes parallèles. Dans l'image ci-dessous, il y a 3 rails verticaux et 3 horizontaux.

Cellules : les cellules sont les éléments constitutifs de la grille. Il n'y a que 9 cellules dans la figure ci-dessous.

Régions : la région est un rectangle d'un nombre arbitraire de cellules. Celles. une piste est à la fois une zone et une cellule.

Positionnement des éléments dans la grille

Commençons par les bases. Dans cette section, je vais vous montrer comment utiliser la grille pour placer des éléments à des endroits spécifiques. Pour travailler avec CSS Grid Layout, vous devez créer un élément parent et un ou plusieurs enfants. Par exemple, je vais prendre le balisage ci-dessous :

< div class = "grid-container" > < div class = "grid-element item-a" >UNE< / div > < div class = "grid-element item-b" >B< / div > < div class = "grid-element item-c" >C< / div > < div class = "grid-element item-d" >ré< / div > < div class = "grid-element item-e" >E< / div > < div class = "grid-element item-f" >F< / div > < / div >

Pour créer une grille, le conteneur doit spécifier les propriétés display:grid ou display:inline-grid, ainsi que d'autres styles :

Grid-container ( display: grid; grid-template-columns: 200px 10px 0.3fr 10px 0.7fr; grid-template-rows: auto 20px auto; )

Grille-conteneur( affichage : grille ; grille - modèle - colonnes : 200px 10px 0.3fr 10px 0.7fr ; grille-modèle-lignes : auto 20px auto ;

Les propriétés grid-template-columns et grid-template-rows définissent la largeur des lignes et des colonnes. Dans l'exemple ci-dessus, j'ai créé 5 colonnes. Une colonne de 10 pixels de large est utilisée comme séparateur entre les éléments. La première colonne fait 200 pixels de large. La troisième colonne occupe 0,3 de l'espace restant. Et la cinquième colonne occupe 0,7 de l'espace restant.

Étant donné que la première ligne est définie sur grid-template-rows: auto , cela permet à la ligne de se développer au fur et à mesure que le contenu est ajouté. Une ligne de 20px fonctionne comme un séparateur. Dans la démo ci-dessous, vous pouvez voir que les éléments sont étroitement pressés les uns contre les autres.

Faites attention à l'élément B - il est situé dans la deuxième colonne, que nous utilisons comme séparateur. Si le positionnement des éléments n'est pas défini manuellement, le navigateur placera les éléments dans les cellules de gauche à droite, et s'ils ne tiennent pas dans une rangée, le reste passera à la deuxième rangée. C'est pourquoi nous avons laissé 4 colonnes de rechange sur la deuxième ligne.

Pour déplacer un élément vers une cellule de grille donnée, vous devez spécifier le positionnement de cet élément via CSS. Avant d'expliquer comment déplacer les éléments de la grille, jetez un œil à la figure ci-dessous.

Dans cet exemple, nous utiliserons un système de placement d'éléments linéaires. Le système de lignes signifie que les lignes de la grille joueront un rôle dominant dans le placement des éléments. Prenons l'exemple de l'élément B. Horizontalement, ce bloc commence sur la troisième ligne et se termine sur la 4ème ligne de colonne. En plus des lignes verticales, cet élément est situé entre les lignes des première et deuxième rangées.

Pour définir la ligne verticale de départ d'un élément, nous utilisons la propriété grid-column-start. Dans notre cas, la valeur sera 3. La propriété grid-column-end pointe vers la ligne verticale de fin de l'élément. Dans notre cas, il s'agit de 4. Les valeurs des lignes horizontales sont définies de la même manière.

Sur la base de ce qui précède, nous concluons que pour déplacer l'élément B vers la deuxième cellule, vous devez utiliser le code :

Élément-b ( début de colonne de grille : 3 ; fin de colonne de grille : 4 ; début de ligne de grille : 1 ; fin de ligne de grille : 2 ; )

Élément-b( grille - colonne - début : 3 ; grille - colonne - fin : 4 ; grille-rangée-début : 1 ; grille-ligne-fin : 2 ;

De même, pour déplacer l'élément F vers la sixième cellule, vous devez :

Élément-f ( début de colonne de grille : 5 ; fin de colonne de grille : 6 ; début de ligne de grille : 3 ; fin de ligne de grille : 4 ; )

Élément-f( grille - colonne - début : 5 ; grille - colonne - fin : 6 ; grille-rangée-début : 3 ; grille - ligne - fin : 4 ;

Création d'une mise en page de base

Nous allons maintenant créer une mise en page de blog de base qui comportera un en-tête, un pied de page, une barre latérale et deux sections pour le contenu. Balisez d'abord :

< div class = "grid-container" > < div class = "grid-element header" >entête< / div > < div class = "grid-element sidebar" >Barre latérale< / div > < div class = "grid-element main" >contenu principal< / div > < div class = "grid-element extra" >informaitons supplémentaires< / div > < div class = "grid-element footer" >bas de page< / div > < / div >

N'oubliez pas que l'ordre dans lequel les balises sont placées dans le balisage n'affecte pas le positionnement des éléments sur une page Web. Sans changer le CSS, vous pouvez placer le pied de page dans le balisage au-dessus de l'en-tête, mais le positionnement des éléments restera toujours le même. Mais je ne recommande pas de faire ça. Le point principal ici est que le balisage ne vous indique plus où l'élément sera placé.

Il nous reste à définir les valeurs des propriétés de type grid-row-end pour tous les éléments. Comme dans l'exemple précédent, nous utiliserons le graphique en grille pour déterminer les valeurs des propriétés.

Danny Markov

La conception est assez simple - elle consiste en un conteneur aligné au centre, à l'intérieur duquel nous avons un en-tête, une section principale, une barre latérale et un pied de page. Voici les principaux « tests » que nous devons effectuer tout en gardant CSS et HTML aussi propres que possible :

1. Placez quatre sections de mise en page principales.
2. Rendez la page réactive (la barre latérale glisse sous le contenu principal sur les petits écrans).
3. Aligner le contenu de l'en-tête - navigation à gauche, bouton à droite.

Comme vous pouvez le voir, à des fins de comparaison, nous avons tout gardé aussi simple que possible. Commençons par le premier test.

Test 1 : Placer des sections de page

Solution sur Flexbox

Ajoutez display: flex au conteneur et définissez la direction des éléments enfants verticalement. Cela positionne toutes les sections les unes sous les autres.

Conteneur ( display: flex; flex-direction: column; )

Nous devons maintenant nous assurer que la section principale et la barre latérale sont situées côte à côte. Étant donné que les conteneurs flexibles sont généralement unidirectionnels, nous devons ajouter un élément supplémentaire.

Nous définissons ensuite cet élément pour afficher : flex et flex-direction avec la direction opposée.

Enveloppe principale et latérale ( affichage : flex ; flex-direction : row ; )

La dernière étape consiste à définir les dimensions de la section principale et de la barre latérale. Nous voulons que le contenu principal soit trois fois plus large que la barre latérale, ce qui est facile à faire avec flex ou pourcentages.

Comme vous pouvez le voir, Flexbox a tout bien fait, mais nous avions également besoin de quelques propriétés CSS et d'un élément HTML supplémentaire. Voyons comment CSS Grid fonctionnera.

Solution de grille CSS

Il existe plusieurs options pour utiliser CSS Grid, mais nous utiliserons la syntaxe grid-template-areas la mieux adaptée à nos besoins.

Tout d'abord, nous allons définir quatre grid-areas , une pour chaque section de la page :

header ( grid-area: header; ) .main ( grid-area: main; ) .sidebar ( grid-area: sidebar; ) footer ( grid-area: footer; )

Nous pouvons maintenant configurer notre grille et déterminer l'emplacement de chaque zone. Le code peut sembler assez complexe au début, mais une fois que vous vous êtes familiarisé avec le système de grille, il devient plus facile à comprendre.

Container ( display: grid; /* Définissez la taille et le nombre de colonnes de notre grille. L'unité fr fonctionne comme Flexbox : les colonnes se partagent l'espace libre dans la ligne en fonction de leurs valeurs. Nous aurons deux colonnes - la première est de trois fois la taille de la seconde. */ grid-template -columns: 3fr 1fr; /* Associe les zones créées précédemment avec des endroits dans la grille. La première ligne est l'en-tête. La deuxième ligne est divisée entre la section principale et la barre latérale. La dernière ligne est le pied de page .*/ grid-template-areas: "header header" " main sidebar" "footer footer"; /* L'espacement entre les cellules de la grille sera de 60px */ grid-gap: 60px; )

C'est tout! Notre mise en page correspondra désormais à la structure ci-dessus, et nous l'avons configurée de manière à ne pas avoir à gérer les marges ou le rembourrage .

Test 2. Rendre la page responsive

Solution sur Flexbox

Cette étape est strictement liée à la précédente. Pour la solution Flexbox, nous devrons changer la direction du flex et ajuster la marge .

@media (max-width : 600px) ( .main-and-sidebar-wrapper ( flex-direction : colonne ; ) .main ( margin-right : 0 ; margin-bottom : 60px ; ) )

Notre page est assez simple, il n'y a donc pas beaucoup de travail dans la requête média, mais dans une mise en page plus complexe, il y a beaucoup de travail à faire.

Solution de grille CSS

Puisque nous avons déjà défini les grid-areas , nous avons juste besoin de les réorganiser dans la media query. Nous pouvons utiliser la même configuration de colonne.

@media (max-width : 600px) ( .container ( /* Aligner les zones de grille pour la mise en page mobile */ grid-template-areas: "header header" "main main" "sidebar sidebar" "footer footer"; ) )

Ou nous pouvons redéfinir toute la mise en page à partir de zéro si nous pensons que cette solution est plus propre.

@media (max-width: 600px) ( .container ( /* Conversion de la grille en une disposition à une seule colonne */ grid-template-columns: 1fr; grid-template-areas: "header" "main" "sidebar" "footer "; ) )

Test 3 : Alignement des composants de l'en-tête

Solution sur Flexbox

bouton

Nous avons déjà fait une mise en page similaire sur Flexbox dans un de nos anciens articles - . La technique est assez simple :

En-tête ( display: flex; justifier-content: space-between; )

La liste de navigation et le bouton sont maintenant correctement alignés. Il ne reste plus qu'à placer les objets à l'intérieur