Créez une mise en page réactive avec CSS Grid

Contenu

• 01. Configurez votre balisage
• 02. Ecrire les styles de base
• 03. Configurez votre grille
• 04. Configurer la compatibilité des grands navigateurs
• 05. Style des éléments individuels
• 06. Placer les objets sur la grille
• Un petit mot sur les anciens navigateurs

CSS Grid Layout prend de plus en plus en charge les navigateurs chaque jour et nous pouvons envoyer CSS Grid en production. L'adoption rapide de CSS Grid a été vraiment remarquable.

Avant de créer une mise en page de site de portefeuille réactive avec CSS Grid, clarifions quelques points: CSS Grid ne remplace pas Flexbox. Ce n’est même pas un remplacement pour les flotteurs. En fait, vous vous rendrez peut-être compte que nous utilisons Flexbox pour faire des choses que CSS Grid fait beaucoup mieux. Mais au lieu de penser en termes de remplacement, nous pouvons penser en termes de combinaison.

• 15 tutoriels de conception Web réactifs vraiment utiles

Imaginez un sandwich au beurre d'arachide et à la gelée. Le beurre de cacahuète et la gelée sont excellents seuls, mais lorsqu'ils se réunissent, une nouvelle chose naît et la magie opère.

Voici à quoi ressemblent nos outils de mise en page de site Web. Ils sont excellents dans ce qu'ils font individuellement, mais lorsqu'ils sont combinés, la magie opère et nous pouvons créer de nouvelles mises en page passionnantes. Dans ce cas, nous allons créer notre propre PB&J de développement Web avec CSS Grid et Flexbox. Vous souhaitez simplifier encore plus votre processus? Choisissez un constructeur de site Web décent.

01. Configurez votre balisage

Dans ce didacticiel, nous allons utiliser ensemble CSS Grid et Flexbox pour créer une mise en page de portefeuille réactive. Chacune de ces boîtes a une taille différente, certaines d'entre elles s'étendent sur des lignes et chaque boîte a un titre qui se trouve en bas. Nous utiliserons certains des excellents outils d'alignement fournis avec Flexbox pour y parvenir.

Commençons par configurer notre balisage.

ul class = ”boxes”> li> div class = ”boxes__text-wrapper”> h2> Titre de l'étude de cas / h2> p> Une description accrocheuse pour notre étude de cas. Nous avons travaillé dur./p> / div> / li> / ul>

Nous dupliquerons cet élément de liste et tout ce qu'il contient six fois afin de pouvoir jouer avec des éléments. Au cas où vous vous poseriez la question, nous avons décidé d'utiliser le ul élément ici car il s'agit d'une liste d'entrées. N'hésitez pas à utiliser ce qui vous convient.

À l'intérieur de l'élément de liste, nous avons un div avec la classe de .boxes__text-wrapper qui contiendra le titre de l'étude de cas et la description qui l'accompagne.

02. Ecrire les styles de base

Définissons maintenant quelques styles de base avec lesquels travailler.

body {font-family: Avenir, sans-serif; marge: 2rem auto; largeur: 95%; } h2, p {marge: 0; } ul {style liste: aucun; rembourrage: 0; marge: 0; } .boxes> * {remplissage: .5rem; couleur d'arrière-plan: # 333; Couleur blanche; }

Nous avons changé la police en Avenir. Nous supprimerons la marge de notre en-tête et de notre paragraphe et réinitialiserons la liste non ordonnée. Nous attribuerons également à chaque élément de liste des styles par défaut pour nous aider à voir où chacun se trouve.

03. Configurez votre grille

Nous voulons d'abord créer notre mise en page pour le mobile. Mettre en place notre grille sur de petits écrans est aussi simple que cela:

.boxes {affichage: grille; grid-auto-rows: minmax (125px, auto); écart de grille: .5rem; }

Grid empilera nos éléments les uns sur les autres car par défaut, il n'y a qu'une seule colonne. Nous allons créer un espace entre chaque étude de cas en utilisant écart de grille - cela nous permet d'ajouter une gouttière entre les lignes et les colonnes.

Oubliez l'ajout d'une marge aux colonnes uniquement pour avoir besoin de complexes nième enfant sélecteurs; les gouttières n'apparaissent qu'entre les colonnes ou les lignes, jamais après ou avant une colonne ou row.grid-gap est le raccourci degrille-colonne-espace et grid-row-gap. Habituellement, nous utilisons le longhand, mais nous allons remplacer les deux à mesure que le navigateur se développe, nous utiliserons donc le raccourci.

Ensuite, nous utiliserons grid-auto-rows pour indiquer à notre conteneur de grille la hauteur des nouvelles lignes. Grid créera de nouvelles lignes pour placer tout notre contenu. Nous pouvons contrôler la taille de ces lignes créées automatiquement avec le grid-auto-rows propriété. Nous utilisons une nouvelle fonction à notre disposition: min max(). Avec min max() nous pouvons spécifier une taille minimale et une taille maximale.

Avec notre code, nous disons que nous voulons que nos lignes aient un minimum de 120 pixels et un maximum d'auto. Nous utilisons la fonction automatique ici, car nous voulons que nos lignes augmentent si le contenu le justifie.

04. Configurer la compatibilité des grands navigateurs

Configurons notre page de sorte que lorsque notre navigateur est de 40em ou plus, notre conteneur de grille comporte six colonnes d'une fraction chacune.

@media screen et (min-width: 40em) {.boxes {grid-template-columns: repeat (6, 1fr); écart de grille: 2px; }}

grille-modèle-colonnes est la propriété que nous utilisons pour indiquer à notre grille combien de colonnes doivent exister. Il accepte toutes les unités de longueur que nous connaissons et aimons telles que rem, em, px, pourcentages,vw, vh et fr.

le fr est une nouvelle unité que nous obtenons avec CSS Grid Layout. Avec lui, nous pouvons dire au navigateur de faire des calculs à notre place - excellent.

En disant au navigateur de créer six colonnes d'une fraction, le navigateur calculera la largeur de notre conteneur de grille et le divisera en six colonnes égales. De plus, comme Grid est intelligent, il ne divisera l'espace restant qu'après avoir calculé la gouttière que nous avons spécifiée.

05. Style des éléments individuels

Nos études de cas semblent un peu terne comme de simples boîtes grises. Ajoutons une image d'arrière-plan, faisons afficher nos titres au bas de ces cases et ajoutons un dégradé pour que notre titre se démarque.

.boxes li {image de fond: gradient linéaire (rgba (0,0,0,0), rgba (0,0,0,0.8)), url (chemin / vers / image); background-size: couverture; affichage: flex; align-items: flex-end; }

Cette image d'arrière-plan était une image gratuite d'Unsplash, mais n'hésitez pas à utiliser l'image que vous souhaitez. J'intègre également Flexbox dans le mix pour aligner notre texte au bas de nos boîtes. Vous ne le verrez pas encore, mais au fur et à mesure que nous plaçons chaque boîte différente, vous finirez par le voir fonctionner.

06. Placer les objets sur la grille

Malheureusement, Grid ne dispose pas d'un moyen de placer automatiquement les éléments dans la disposition de grille que nous avons vue au début. Heureusement pour nous, Grid nous donne les outils pour le faire manuellement assez facilement. Dans ce didacticiel, nous utiliserons nth-child pour placer chaque élément de liste. Dans un site Web de production, nous vous conseillons d'utiliser une classe qui, avec une bonne planification, pourrait permettre d'automatiser des mises en page comme celle-ci dans un site riche en contenu.

Commençons avec notre premier élément.

@media screen et (min-width: 40em) {.boxes li: nth-child (1) {grid-column: 1 / -1; ligne de grille: span 3; }}

Nous placerons tous nos styles d'emplacement dans cette requête multimédia que nous avons écrite précédemment, car nous souhaitons que cette mise en page se produise une fois que notre navigateur est supérieur ou égal à 40em. Avec nième enfant nous ciblons le premier élément de la liste. CSS Grid nous permet de placer facilement nos éléments avec grid-column et grid-row. Il existe de nombreuses façons différentes de spécifier l'emplacement des éléments, mais ici, nous disons à notre élément de commencer à la première ligne de la colonne et de couvrir tout le conteneur avec -1.

Ensuite, avec grid-row, nous disons à l'élément de s'étendre sur trois lignes. Comment savons-nous que trois lignes auront la taille que nous voulons? Eh bien, nous avons spécifié la taille de ces lignes avec des lignes automatiques de grille il y a quelques instants, et si nous n'en sommes pas satisfaits, nous pouvons modifier la taille minimale.

Plaçons le reste de nos articles.

@media screen et (min-width: 40em) {.boxes li: nth-child (2) {grid-column: span 2; ligne de grille: span 7; } .boxes li: nth-child (3) {grille-colonne: span 4; ligne de grille: span 3; } .boxes li: nth-child (4) {grille-colonne: span 2; ligne de grille: portée 4; } .boxes li: nth-child (5), .boxes li: nth-child (6) {grille-colonne: span 2; ligne de grille: portée 2; }}

N'est-il pas étonnant de voir le contrôle que nous offre Grid Layout? Avec seulement quelques lignes de code, nous pouvons créer une mise en page entièrement réactive qui ne se cassera pas si d'autres éléments sont ajoutés.

Bien sûr, ils peuvent sembler un peu bizarres, car ils n'occuperont qu'une seule colonne et ligne de la grille par défaut, mais cela ne rompt pas notre mise en page. Si nous faisions cela avec des flotteurs et des largeurs et hauteurs fixes, nous serions dans une impasse si plus de contenu devait être ajouté.

Un petit mot sur les anciens navigateurs

OK, il est temps de s’adresser à l’éléphant dans la pièce. «Qu'en est-il des anciens navigateurs?» La réponse à cette question est la même que pour toute nouvelle fonctionnalité de CSS: utilisez des requêtes de fonctionnalités et adoptez la cascade. Les requêtes de fonctionnalités sont très bien prises en charge, et là où elles ne le sont pas, nous pouvons placer notre solution de secours en premier. Par exemple, nous écririons quelque chose du genre:

.your-selector {affichage: flex; } / * Votre code de grille * / @supports (display: grid) {display: grid; grille-modèle-colonnes: répéter (3, 1fr); écart de grille: 1rem 2rem; }

Écrire notre code de cette manière signifie que si le navigateur comprend Grid Layout, il l'utilisera à la place de Flexbox. De plus, comme nous adoptons la cascade, les navigateurs qui ne comprennent pas les requêtes de fonctionnalités les ignoreront et disposeront déjà des informations dont ils ont besoin. Nous pourrions avoir besoin de planifier un peu plus la façon dont nous écrivons nos styles que d'habitude, mais ce faisant, nous pouvons créer de superbes mises en page avec des solutions de rechange judicieuses. Si vous souhaitez enregistrer vos anciennes pages, exportez-les au format PDF et enregistrez-les dans le stockage en nuage.

De plus, avec le temps, il n'y aura de plus en plus de support pour CSS Grid. Pensez simplement à quel point ce serait génial de supprimer plus tard nos solutions de secours et de laisser tout le CSS lié à Grid. Au fur et à mesure que vous en apprendrez plus sur Grid, vous vous rendrez compte qu'il fait beaucoup de choses que nous faisons actuellement avec beaucoup moins de lignes de CSS. N'oubliez pas que si vous avez un site particulièrement complexe, votre service d'hébergement Web doit être à la hauteur.

Cet article a été initialement publié dans magazine net, le premier magazine mondial pour les développeurs et les concepteurs Web. Abonnez-vous ici.