Share
Dans ce tutoriel, nous allons utiliser CSS Grid pour nous aider à créer une «présentation en grille cassée», ce qui a toujours été difficile avec les méthodes de présentation CSS plus traditionnelles..
Voici ce sur quoi nous travaillons (jetez un coup d’œil à la version plus grande pour un effet complet):
Cette conception est basée sur le travail d'Anthony Harmon, dont le travail est parfait pour notre démo. Jetez un coup d'œil à cette mise en page qu'il a réalisée pour Rel Acoustics:
A bientôt Anthony :)Les concepteurs de sites Web ont été conditionnés au fil des ans à observer le flux de documents et l'ordre des sources; créer des mises en page par blocs flottants et les laisser remplir la page comme des briques de construction. Dans le monde du responsive design, cette approche semble assez naturelle. Cependant, la mise en page est bien différente de celle où les dimensions fixes permettent aux concepteurs de placer en toute confiance du texte et des images exactement où ils veulent, ce qui permet des mises en page plus expérimentales et plus audacieuses..
CSS Grid, en plus de nous permettre d’organiser les choses selon les axes x et y, peut nous aider à combler le fossé entre les dispositions et à donner un peu plus d’audace à nos conceptions.!
"Nous devons commencer à réinventer ce qu'un bon graphisme peut être avec des choses qui se chevauchent." - Jen Simmons
Il est temps de rester coincé.
Les colonnes de la grille ne doivent pas nécessairement être uniformes. Prenons une section de la mise en page ci-dessus et voyons à quoi la grille pourrait ressembler.
Remarque: nous construisons une section dans ce tutoriel. Il n'y a aucune raison pour que chacune des sections de page ne puisse pas être construite à partir de grilles indépendantes.
Nous allons commencer avec un balisage, un conteneur de grille:
Ensuite, sur ce conteneur, nous allons déclarer affichage: grille; puis définir les colonnes et les lignes.
.grid1 display: grid; Grille-modèle-colonnes: 3fr 6fr 1fr 5fr 10fr 2fr; grid-template-rows: 100px auto 15px auto auto;
Les colonnes sont disposées exactement comme vous les voyez dans l'image ci-dessus. le fr unité est une fraction de la largeur totale, de sorte que la première colonne en occupe trois, la seconde est plus large et en prend six. Au total, notre mise en page comprend 27 unités de proportions de grille d'une largeur à peine presque classique!
Les lignes sont un peu différentes. Vous verrez un mélange de mesures de pixels fixes et auto. Où auto est utilisé, la ligne augmentera et diminuera en fonction du contenu.
Commençons par les images. Pour le balisage, nous avons deux options; soit nous utilisons img éléments, ou nous utilisons d'autres éléments avec un fond d'image.
Nous pourrions utiliser ajustement d'objet: couverture; sur img éléments, mais c’est délicat, pourquoi rendre nos vies plus difficiles?! Donc, pour cette démo, nous allons avec cette dernière, car cela nous donne une plus grande flexibilité quant à la manière dont les proportions des images changent avec des dispositions fluides..
Dites bonjour à quelques bons vieux divs:
Avec quelques images de fond pour les couvrir:
.img1 background: url (wooden.jpg); taille du fond: couverture; .img2 background: url (speaker.jpg); taille du fond: couverture; .img3 background: url (waves.jpg); taille du fond: couverture;
L'algorithme de placement automatique de Grid les aura déjà bien placés sur notre grille, mais soyons précis. Nous utiliserons les lignes de la grille pour dicter où chaque élément doit commencer et se terminer.
Notre première image commence à la ligne 1 de la colonne et se termine à la ligne 3. Nous pouvons définir cela comme ceci:
grille-colonne: 1/3;
ou comme ceci:
grille-colonne: 1 / span 2;
En termes de lignes, notre première image doit commencer par la ligne 2 et se terminer par la ligne 5, que nous pouvons énoncer comme ceci:
rangée de grille: 2/5;
ou ca:
rangée de grille: 2 / span 3;
Faisons maintenant la même chose pour nos deux autres images. Voici ce avec quoi vous devriez vous retrouver:
Certes, ce n’est pas particulièrement impressionnant, mais c’est que la plupart des rangées n’ont pas encore de hauteur. Ils obtiendront cela une fois que nous commencerons à ajouter plus de contenu à l'étape suivante.
Pour plus sur comment colonne de grille et rangée de la grille travail, jetez un oeil à ces tutoriels rapides:
Ajoutons maintenant le contenu textuel; un blockquote dans un wrapper, et l'appel au bloc d'action. Vous pouvez les ajouter où bon vous semble en tant qu’éléments enfants du .grille1 conteneur, l'ordre source n'a pas d'importance.
«Presque immédiatement, un Gallois qui avait construit cet incroyable système de graves a retenti, et les audiophiles ont rapidement commencé à rechercher ces sous-marins légendaires, construits comme aucun autre.»Gibraltar
Présentation de 212 / SE, notre subwoofer le plus puissant et le plus agile, conçu exclusivement pour les systèmes et les salles de grande taille afin de permettre aux haut-parleurs de pointe d'accéder à une voix totale..
Voir les détails du produit →
Ensuite, avant de styliser quoi que ce soit, nous les positionnerons sur la grille, comme nous le faisions avec les images:
.strapline grille-colonne: 3 / span 3; rangée de grille: 2 / span 1; .cta-wrapper grille-colonne: 4 / span 2; rangée de grille: 4 / span 2;
Avoir l'air mieux!
À ce stade, il est intéressant de noter que vous pouvez jouer avec z-index si vous le souhaitez. L'empilement suit l'ordre des sources par défaut. ce qui est le premier dans le balisage sera placé en bas, ce qui est déclaré plus tard va en haut. Mais si nous devions appliquer z-index: 1; à .img1 il serait empilé sur .img2.
L'activation de l'inspecteur de votre navigateur vous apportera de l'aide pour la disposition de la grille. Dans l'inspecteur de Chrome, la sélection des éléments affichera des lignes et des mesures de la grille, comme suit:
L’inspecteur de Firefox en fera encore plus, vous permettant de superposer la grille à l’aide de contrôles situés sous le curseur. Disposition languette. Vous pouvez afficher les numéros de ligne, les noms de zones et naviguer dans les zones de la grille sur une version miniature plus petite:
Pointe: en regardant sous le Règles onglet, appuyez sur l'icône de la grille à côté de afficher pour basculer la superposition:
En inspectant la grille, vous vous rendrez vite compte que si vous avez égaré un élément de la grille, sauté une ligne ici ou là ou nommé quelque chose de manière incorrecte.
Certaines déclarations de polices et styles de boutons rapides donneront une apparence encore meilleure, sans trop d'effort. Nous allons commencer par relier certaines polices Google dans le du document:
Nous utilisons Open Sans pour le corps, Playfair Display pour le blockquote et le titre. Appliquons-les:
corps color: # 292929; police: 1em / 1.7 'Open sans', sans-serif; blockquote font: italic 1.1em / 2 'Playfair Display', serif; marge: 0 0 2em 0; .cta h1 font: bold 6em / 1 'Playfair Display', serif; marge: 0 0 20px 0; position: relative;
Maintenant quelques styles de boutons:
.bouton display: inline-block; Couleur blanche; texte-décoration: aucun; arrière-plan: # 292929; rembourrage: .8em 1.5em; .button: hover background: black;
Enfin, nous alignerons la citation de bloc sur le centre, puis nous ajouterons un peu de remplissage à l'appel à l'action, afin de compléter la ligne dans laquelle elle a été placée. Voici ce que vous devriez maintenant avoir:
Gardez à l'esprit que nous construisons notre mise en page pour une large fenêtre. Ce que vous voyez intégré dans le didacticiel peut ne pas sembler optimal.
La conception sur laquelle nous travaillons comporte quelques touches visuelles que nous n’avons pas encore utilisées. Nous pourrions les ajouter de différentes manières, mais comme ils ne le sont pas contenu en tant que tels, nous les ajouterons à l'aide de pseudo-éléments CSS. Tout d’abord, le gribouillis au-dessus du blocquote:
.strapline margin-top: 100px; position: relative; .strapline :: before content: "; display: block; background: url (wavy.svg) repeat-x; taille du fond: couverture; largeur: 20%; hauteur: .5em; position: absolute; haut: - 3em; gauche: 40%;
Ces styles utilisent un ::avant pseudo élément sur le .strapline div, en le positionnant au-dessus du conteneur lui-même en utilisant une position haute négative. Il est parfaitement centré et vous vous souviendrez que nous lui avons laissé assez de place en définissant notre première rangée comme étant 100 pixels de haut..
Nous ferons quelque chose de similaire pour un badge SVG sur l'en-tête:
.cta h1 :: before content: "; display: block; hauteur: 1em; largeur: 1em; fond: url (badge.svg) centre non répété; taille du fond: 80%; position: absolue, gauche: - 120px; top: 0;
Encore une fois, nous utilisons un pseudo-élément, car il s’agit simplement d’un élément visuel, par opposition à un contenu de valeur. Cela ne veut pas dire que vous n'auriez pas pu l'ajouter en tant que
Nous avons maintenant construit nous-mêmes une très solide grille brisée! Il est temps que certaines prochaines étapes aillent encore plus loin.
La grille CSS est assez bien supportée de nos jours, bien que IE11 nécessite toujours une version préfixée, vous pouvez donc envelopper vos styles de grille dans un fichier. @les soutiens déclaration. Cela ressemblerait à ceci:
@supports (display: grid) / * disposition de la grille * / .grid1 display: grid; Grille-modèle-colonnes: 3fr 6fr 1fr 5fr 10fr 2fr; grid-template-rows: 100px auto 15px auto auto; …
Tout navigateur qui ne prend pas correctement en charge CSS Grid ignorera tout ce que vous avez placé dans cette déclaration, vous donnant ainsi la possibilité de fournir une solution de secours..
Jetez un coup d’œil aux «retombées» de la grille et aux idées de remplacement sur les styles de repli si vous le souhaitez.
Notre mise en page a une apparence nette sur les grands écrans, mais certaines fissures apparaissent lorsqu’elles sont compressées dans des fenêtres plus petites (comme lorsqu’elles sont intégrées dans ce tutoriel). Comment géreriez-vous cela de manière réactive? L'ajout de requêtes multimédias vous permettra d'établir d'abord les styles, puis de les construire progressivement pour rendre la grille plus complexe à mesure que les fenêtres grandissent:
.grid1 display: grid; Grille-modèle-colonnes: 1fr 1fr; @Media only screen et (min-width: 768px) .grid1 grid-template-columns: 3fr 6fr 1fr 5fr 10fr 2fr; grid-template-rows: 100px auto 15px auto auto;
Vous pouvez également choisir de masquer les éléments que nous avons créés sur des appareils plus petits, en les préservant jusqu'à ce que vous disposiez de davantage d'espace à l'écran. Le choix t'appartient!
Voici un exemple de la façon dont vous pourriez rendre cette conception particulière sensible.
Ce tutoriel vous a donné un aperçu du monde des mises en page alternatives réalisables avec CSS Grid. Oubliez les mises en page que vous avez pratiquées avec les flotteurs et le positionnement; briser ces vieilles habitudes! Commencez à explorer des mises en page plus complexes et voyons si nous pouvons rendre le Web un peu plus intéressant.
Accentsconagua