éléments pour être nos éléments de la grille.

Un texte sur deux panneaux contient du texte, mais le reste concerne nos images de bandes dessinées. Nous avons deux options ici: nous pouvons soit placer nos images en ligne dans les panneaux, soit ajouter des images via CSS. Je fais ce dernier parce que cela permet de contrôler plus facilement le placement et le dimensionnement des graphiques, mais vous pouvez prétendre que les images en ligne seraient plus accessibles. Votre choix.

2. Styles de base

Pour lancer la balle (de la fourrure), ajoutons quelques styles pour recouvrir notre typographie et nos couleurs:

/ * bases * / body background: # f8f7f2; rembourrage: 0 10%; police: 100% / 1,5 'Kalam', cursive;  h1 margin: 0; hauteur de ligne: 1; rembourrage: 10px; couleur: # 251b19;  p margin: 0; rembourrage: 10px; couleur: # 251b19; taille de police: 1.2em; a color: # e56633;  a: hover text-decoration: none;  

J'ai choisi Kalam comme police Web Google pour notre texte. Son style manuscrit convient parfaitement aux bandes dessinées que je considère. Vous aurez besoin de le brancher dans votre CSS ou via un lien dans la tête de votre document:

Kalam sur Google Fonts

3. Notre grille

En commençant par mobile, nous allons disposer les éléments dans une colonne avec un seul panneau sur chaque ligne:

.grid-1 display: grid; largeur: 100%; largeur maximale: 770px; marge: 10% auto; grid-template-columns: 1fr; grid-template-rows: auto 200px 200px auto 200px 200px 200px auto 200px 200px auto; intervalle de grille: 25 px; 

En vous reportant à nos précédents tutoriels sur la grille, vous vous souviendrez que Grille-modèle-colonnes attribue le nombre de colonnes que nous aurons et leur largeur. grid-template-rows fait de même pour les lignes; nous en définissons ici onze. Ceux contenant des images auront une hauteur de 200px, ceux avec du texte seront automatiquement redimensionnés en fonction du contenu. finalement, fossé définit la taille de nos gouttières.

Ajoutons maintenant quelques styles généraux à nos panneaux:

.panneau couleur: blanc; répétition de fond: non répétée; position de fond: centre centre; taille du fond: couverture; box-shadow: 0px 0px 0px 5px # 251b19; 

le Contexte Les propriétés n'ont pas encore d'impact visuel, mais elles le seront dès que nous ajouterons des images d'arrière-plan. Et le boîte ombre agit comme une frontière. Vous pouvez également utiliser traditionnel frontière propriétés ici si vous préférez, mais box-shadow donne parfois plus de flexibilité.

Voyons ce que nous avons jusqu'à présent!

4. Photos de chat

A quoi sert Internet, n'est-ce pas? J'ai préparé quelques images SVG à ajouter aux panneaux, que je réalise une à une:

.panel-1 background-image: url (cat-1.svg); 

Avoir l'air bien!

Mais je ne veux pas de frontières tout les panneaux. Je vais les enlever (en utilisant boîte-ombre: aucune;) parmi ceux contenant du texte, avec la première image et l'image finale.

5. Requêtes de médias

Ces images ne fonctionnent pas encore parfaitement. Le pauvre vieux Barry commence à avoir des problèmes sérieux. Il est temps de regarder au-delà de la téléphonie mobile et de modifier notre grille pour des fenêtres plus larges. Ajoutons des requêtes aux médias. un à 400px et un à 600px (chiffres arbitraires, utilisez ce que vous voulez):

/ * Interrogation multimédia 1 * / Écran uniquement multimédia et (min-largeur: 400px)  / * Interrogation multimédia 2 * / @ Écran uniquement multimédia et (min-largeur: 600px) 

Nous les utiliserons pour modifier la disposition de la grille dans chaque cas.

/ * média interrogé 1 * / @média uniquement écran et (largeur minimale: 400 pixels) .grid-1 grid-template-columns: repeat (2, 1fr); grid-template-rows: auto 200px auto 200px 200px auto 200px auto;  / * média interrogation 2 * / @média uniquement écran et (largeur minimale: 600 pixels) .grid-1 grid-template-columns: repeat (3, 1fr); grid-template-rows: auto 200px 200px 200px auto; 

Nous allons pour deux colonnes et huit lignes pour les écrans légèrement plus grands, puis trois colonnes et cinq lignes pour encore plus grand.

Couvrant

Maintenant que nous sommes sortis de nos contraintes de colonne unique, nous pouvons être un peu plus créatifs. Nous avons besoin, par exemple, que notre titre soit sur toute la largeur de la bande dessinée. Il en va de même pour les panneaux contenant du texte et la déclaration de copyright. Même certaines images seraient mieux servies dans des panneaux pleine largeur. Nous allons donc ajouter ces détails à la première de nos requêtes multimédia:

 .panneau-titre, .panel-3, .panel-6, .panel-7, .panel-copyright grid-column: span 2; 

J'ai aussi changé la typographie dans quelques cas, pour nous donner à la fin:

Notre mise en page à deux colonnes est superbe! Cependant, notre bande dessinée à trois colonnes doit être corrigée.

Ça marche presque…

6. Fixer notre disposition en trois colonnes

Alors que nous travaillons d'abord sur le mobile, les règles que nous avons appliquées à notre première requête multimédia continuent de s'appliquer sur le plus grand des écrans. Nous devons parcourir les panneaux et réinitialiser certains styles.. 

Commencez par faire le .titre du panneau couvrez trois colonnes, au lieu de deux. ensuite .panneau 3 (avec le texte) peut être remis à grille-colonne: envergure 1; ou grille-colonne: auto;

de même pour .panneau-6. Avec quelques modifications supplémentaires, vous devriez obtenir quelque chose comme ceci:

Un petit peu de Flexbox

J'aimerais que le premier morceau de dialogue soit centré verticalement, utilisons donc flexbox pour le faire. Ajoutez les éléments suivants à la deuxième requête multimédia:

 .panel-3 display: flex; align-items: centre; 

Avant flexbox, après flexbox

7. Panneaux superposés

La grille ne nous limite pas à des blocs équidistants le long d'une page, nous pouvons également superposer nos panneaux. Nous allons rendre notre dernière partie du texte un peu plus intéressante en l'attribuant au même emplacement de la grille que le panneau suivant: 

 .panel-7 grille-colonne: 1; rangée de grille: 4; z-index: 1;  .panel-8 grille-colonne: 1 / span 2; rangée de grille: 4; 

Ici, nous avons positionné les deux .panneau 7 et .panneau 8 à grille-colonne: 1; et rangée de grille: 4;. Cela signifie qu'ils sont tous deux exactement au même endroit, celui qui apparaît en deuxième position dans le DOM étant superposé au premier..

Nous pouvons utiliser z-index pour modifier l'ordre d'empilement, donnant ainsi .panneau 7 une z-index: 1; l'amène au sommet:

Remarque: maintenant que nous avons effectivement supprimé une ligne, vous devez vérifier votre grid-template-rows vont bien. 

Ajoutons un peu plus de style à notre "Naaah". Encore une fois, les éléments de la grille ne sont pas aussi limités que vous ne le pensez - nous pouvons les déplacer avec des marges négatives et même les transformer sans aucun problème. J'ai ajouté quelques styles au panneau et au paragraphe qu'il contient pour donner ceci:

Conclusion

Bien fait-voici ce que nous avons construit!

Il s’agissait d’un exercice amusant d’utilisation de CSS Grid, tout en vous présentant quelques nouveaux concepts de grille. J'espère que ça vous a plu. Maintenant, si ça ne vous dérange pas, je pars pour la sieste.

Lectures complémentaires

• Comprendre les séries pour débutants CSS Grid Layout
• Sleepy Fat Cat Typeface sur GraphicRiver
• La mécanique de la bande dessinée
• Comprendre la bande dessinée de Scott McCloud