Comment créer une mise en page simple avec des mises en page de grille CSS

Si vous vous êtes déjà essayé à la conception d'impression, vous savez d'où vient l'idée des mises en page en grille. Une grille est un outil de mesure précis utilisé pour positionner des éléments de conception sur une page. Cette idée est souvent utilisée sur le Web pour organiser et uniformiser le contenu, ce qui améliore l'expérience de visionnage de vos utilisateurs.

Lorsque la pratique de la conception Web était nouvelle, les mises en page étaient assez simples. En-tête, barre latérale, zone de contenu et pied de page. Maintenant, à mesure que le Web a évolué, nos mises en page sont devenues plus complexes et nous avons beaucoup plus à gérer en tant que concepteurs de sites Web. Nous avons souvent besoin de nombreuses régions de contenu, d'une conception réactive, de plusieurs conceptions de modèles de mise en page, entre autres choses. Et pour mettre en œuvre la conception et l'afficher correctement, des flotteurs et un positionnement sont nécessaires. Les flotteurs semblent simples, mais ils peuvent parfois être difficiles à utiliser.

Heureusement, la grille offre un moyen plus simple de concevoir et d'afficher du contenu Web. C'est un moment formidable pour être un concepteur car les mises en page de grille CSS gagnent rapidement du terrain. Il peut sembler que les grilles ont été une nouvelle idée dans la conception Web ces dernières années, mais croyez-le ou non, les mises en page de grille CSS sont en préparation depuis de nombreuses années. La prise en charge du navigateur pour eux s'est faite très rapidement, ils peuvent donc maintenant aider à atténuer une partie de la frustration liée au positionnement à laquelle les concepteurs ont dû faire face pendant de nombreuses années.

Il est enfin temps de pénétrer dans la grille et d'explorer les nouvelles possibilités de conception !

Prise en charge de la grille CSS

Tout dépend des navigateurs que vous devez prendre en charge, mais il y a de fortes chances que vous n'ayez pas à vous soucier du "mode drapeau" lorsque vous utilisez CSS Grids. Vous pouvez toujours consulter la documentation Puis-je utiliser pour vérifier, mais la prise en charge des grilles CSS a considérablement augmenté et de nombreux concepteurs sont en mesure de l'utiliser en production, ce qui est un motif de célébration !

Principes de base de la mise en page de la grille CSS

En utilisant CSS, les mises en page en grille aideront à définir les zones de contenu sur votre page Web. Il existe un ensemble relativement nouveau de propriétés définies dans les spécifications de mise en page de la grille CSS. Il s'agit d'une excellente ressource à consulter pour en savoir plus sur cette nouvelle façon de concevoir la mise en page. Les mises en page de grille CSS aident à simplifier les choses et à faciliter la création de mises en page. Considérez la grille comme une structure dans laquelle les mesures peuvent être définies.

Parties de la grille

Lignes

Dans ce cas, il y a cinq lignes verticales et trois lignes horizontales. Les lignes sont numérotées à partir de un. Les lignes verticales sont affichées de gauche à droite dans cet exemple, mais cela dépend du sens d'écriture. Parce que cela montre la lecture de gauche à droite, si c'est de droite à gauche, les choses seront inversées. Les lignes peuvent être nommées (optionnel), ce qui aide à les référencer dans CSS.

Des pistes

Une piste est l'espace entre deux lignes parallèles. Dans le schéma, il y a quatre pistes verticales et deux pistes horizontales. Il y a un grand double effort entre les lignes et les pistes. Les lignes sont un excellent moyen de référencer où le contenu commence et s'arrête. Les pistes sont l'endroit où le contenu va réellement.

Cellules

Les cellules se trouvent là où une voie horizontale et une voie verticale se rencontrent. Il y a huit cellules dans le diagramme.

Zones

Les cellules entrent en jeu lors de la spécification des zones. Une zone est une forme rectangulaire qui peut s'étendre sur plusieurs cellules. Comme les lignes, les zones peuvent éventuellement être nommées. Il y a quelques étiquettes incluses dans le diagramme : « A », « B » et « C ».

Création d'une mise en page de grille

Il peut être utile d'esquisser les choses avant de commencer votre mise en page. Rien ne remplace le bon vieux papier millimétré.

HTML pour la grille

 [html] <div class="container"> <div class="grid header">Header</div> <div class="grid sidebar">Sidebar</div> <div class="grid content">Main Content</div> <div class="grid extra">Extra Content</div> <div class="grid footer">Footer</div> </div> [/html]

Le contenant est très important. Dans le conteneur se trouvent les différents blocs de contenu pour le site Web. L'ordre des éléments de la grille dans le conteneur n'a pas d'importance. Ensuite, nous utiliserons CSS pour les placer dans notre mise en page.

Styles CSS

Une fois que vous avez terminé avec le balisage HTML, la déclaration la plus importante est effectuée dans le CSS. Dans le conteneur, vous devez appliquer display:grid ou display:inline-grid . Utilisez display:grid si vous souhaitez une grille au niveau du bloc. Utilisez display:inline-grid pour les grilles de niveau en ligne.

 [css] .container { display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 10px; grid-row-gap: 15px; } .grid { background-color: #444; color: #fff; padding: 25px; font-size: 3rem; } [/css]

Les propriétés grid-template-columns et grid-template-rows sont utilisées pour spécifier la largeur des lignes et des colonnes. Les grid-template-columns ont été définies sur 1fr et 3fr. C'est là que la grille prend forme avec les unités fractionnaires. Avec ces valeurs, il est évident qu'il y a deux colonnes et qu'elles n'ont pas la même largeur. La colonne fixée à 3fr est trois fois plus large que l'autre. Cela explique comment la barre latérale apparaît plus étroite que la zone de contenu.

Il existe des personnalisations réactives qui peuvent être faites, mais l'utilisation des unités fractionnaires est une excellente première étape. L'espacement entre les zones peut être contrôlé avec grid-column-gamp et grid-row-gap .

Les choses semblent assez serrées, mais avec quelques spécifications supplémentaires, les choses prendront forme.

Cet exemple commence par placer l'en-tête, mais les éléments peuvent être placés dans l'ordre qui vous convient le mieux. Si vous voulez commencer par le pied de page, cela fonctionnera aussi.

Commençons par l'en-tête, qui va de la ligne de colonne 1 à la ligne de colonne 4 et de la ligne de ligne 1 à la ligne de ligne 2. Le CSS ressemblera à ceci :

 [css] .header { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2; } [/css]

Vous remarquerez peut-être que la barre latérale est écrasée et que nous ne pouvons pas la voir beaucoup. Nous devrons faire un peu de réaménagement. Dans cette mise en page, référencer les lignes pour obtenir le placement aidera à l'arrangement. Les lignes agissent comme des lignes directrices. L'en-tête est situé entre la ligne à la ligne un et la ligne à la ligne deux. Pour la barre latérale, elle commencera à la ligne trois et se terminera à la ligne six. La ligne d'en-tête s'est terminée à deux, elle sera donc placée juste en dessous. Pour voir l'exemple, voir le projet sur Codepen.

Nous utilisons grid-column-start pour spécifier la ligne verticale de départ d'un élément. Dans ce cas, il serait fixé à trois. La grid-column-end indique la ligne verticale de fin pour un élément. Dans ce cas, cette propriété serait égale à quatre. D'autres valeurs de ligne seront également définies de la même manière. Le placement de la barre latérale est là, il est juste couvert par la zone de contenu.

 [css] .sidebar { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 4; background: #a0c263; } [/css]

Le contenu principal commence à la troisième colonne et se termine à la quatrième colonne. Le haut de la barre latérale et la zone de contenu sont pairs, ils ont donc tous deux un grid-row-start de trois. Vous vous demandez peut-être comment le contenu et la barre latérale sont beaucoup plus grands. En mettant une hauteur sur le conteneur, dans ce cas 400px, celui-ci est maintenant plus grand que les autres éléments.

 [css] .content { grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3; background: #f5c531; height: 400px; } [/css]

Les deux dernières zones de contenu sont la zone de contenu supplémentaire et le pied de page.

 [css] .extra { grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #898989; } .footer { grid-column-start: 1; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4; background: #FFA500; } [/css]

Les déclarations de fin et de début peuvent être écrites plus efficacement. Vous pouvez voir grid-column-start: 1; et grid-column-end: 3; écrit en sténographie. Cela ressemblerait à grid-column: 1 / 3; . Cette même idée peut être utilisée pour déclarer les informations de ligne de colonne.

Avantages réactifs

Maintenant qu'une mise en page a été créée, elle semble très "de bureau". Qu'en est-il des tablettes et des appareils mobiles ? Les dispositions de grille CSS fonctionnent bien avec les requêtes multimédias afin que la conception puisse s'adapter à différentes tailles d'écran. Ce qui est vraiment cool, c'est que vous pouvez modifier les zones de contenu à ces différents points d'arrêt de requête multimédia. En tant que concepteur, cela signifie que vous choisissez ce qui convient le mieux à votre mise en page à différents points d'arrêt. Par exemple, si vous souhaitez que le "contenu supplémentaire" soit placé au-dessus de la zone "contenu", vous pouvez spécifier les colonnes et les lignes correctes.

 [css] /* For mobile phones: */ .header { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2; } .extra { grid-column-start: 1; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4; } .content { grid-column-start: 1; grid-column-end: 4; grid-row-start: 5; grid-row-end: 6; background: #f5c531; height: 400px; } [/css]

En faisant en sorte que les colonnes commencent à un et se terminent à quatre, nous avons fait en sorte que les zones de contenu soient pleine largeur. Les lignes de la grille sont placées de manière à ce que le "contenu supplémentaire" soit maintenant au-dessus du "contenu".

Outil de navigation pour CSS Grid Layout

Lorsque vous concevez des mises en page ou inspectez d'autres sites Web, Firefox offre un excellent outil pour travailler avec les mises en page de grille CSS. Il s'appelle CSS Grid Playground et rend l'examen de la grille très intuitif. En allant dans l'inspecteur, il y a une option dans l'onglet de mise en page pour voir visuellement comment la grille est construite. Cela facilitera le processus de conception d'avoir cet outil pour explorer comment différentes propriétés de grille affectent la disposition et la conception globales de la grille.

Les mises en page de grille CSS sont une nouvelle façon passionnante de créer des mises en page Web. Comme vous pouvez le voir, il est assez facile d'être opérationnel lors de la création d'une mise en page simple. Cet exemple simple est une bonne base pour créer des mises en page plus complexes. Au fur et à mesure que cela gagne en popularité, cette technologie présentera un avantage lors de la conception pour divers appareils et points d'arrêt avec les personnalisations de mise en page qui peuvent être effectuées.