Share
Tout au long de cette série, nous nous sommes familiarisés avec la syntaxe Grid, avons découvert des moyens efficaces de présenter des éléments sur une page et avons fait nos adieux à certaines vieilles habitudes. Dans ce tutoriel, nous allons appliquer tout cela à une conception Web réactive pratique.
Utilisons la démo de l'endroit où nous nous étions arrêtés la dernière fois.
Il comprend deux grilles déclarées; notre grille principale et la grille imbriquée dans l'un de nos éléments. Nous pouvons contrôler le moment où ces grilles entrent en vigueur à l'aide de requêtes de média, ce qui signifie que nous pouvons complètement redéfinir notre présentation à différentes largeurs de fenêtre..
Commencez par dupliquer la première déclaration de grille et encapsulez la copie dans une requête multimédia mobile (j'utilise 500px comme point d'arrêt, mais c'est complètement arbitraire):
.grid-1 / * styles de déclaration de grille * / @média uniquement écran et (min-largeur: 500px) .grid-1 / * styles de déclaration de grille * /
Dans la première déclaration, nous allons modifier la définition de notre grille, en plaçant le tout dans une seule colonne. Nous énumérerons une seule colonne dans notre Grille-modèle-colonnes règle, assurez-vous que les quatre lignes que nous avons maintenant sont définies avec grid-template-rows, et organiser la mise en page avec grille-template-zones:
.grid-1 display: grid; largeur: 100%; marge: 0 auto; grid-template-columns: 1fr; grid-template-rows: 80px auto auto 80px; intervalle de grille: 10 px; grid-template-areas: "en-tête" "principale" "barre latérale" "pied de page";
Nous avons également fait notre fossé seulement 10 pixels par défaut, pour tenir compte des écrans plus petits.
Voici ce que cela nous donne. Vous remarquerez que nous utilisons également notre requête multimédia pour modifier le rembourrage et taille de police sur notre .grille-1 div articles.
Cela prend en charge la disposition principale, mais nous avons toujours la grille imbriquée qui reste obstinément dans sa disposition à deux colonnes en toutes circonstances. Pour résoudre ce problème, nous allons faire exactement comme avant, mais en utilisant un point d'arrêt différent pour suggérer une approche basée sur le contenu en premier:
.item-2 / * styles de déclaration de grille * / @média uniquement écran et (min-largeur: 600px) .item-2 / * styles de déclaration de grille * /
Découvrez le résultat final sur CodePen.
Quelques points à noter ici:
Une autre approche (en quelque sorte) sensible de la grille est bien adaptée aux dispositions de type maçonnerie; bloque automatiquement la taille et le débit, en fonction de la fenêtre d'affichage.
Jusqu'à présent, notre approche a consisté à dicter le nombre de pistes et à regarder les éléments s’ajuster en conséquence. C'est ce qui se passe dans cette démo; on a Grille-modèle-colonnes: répéter (4, 1fr); qui dit "crée quatre colonnes et donne à chacune une fraction d'élément".
Avec le remplissage automatique mot-clé nous pouvons dicter comment large nos pistes sont et permettent à Grid de déterminer le nombre de cartes qui vont tenir dans l’espace disponible. Dans cette démo, nous avons utilisé grid-template-columns: repeat (remplissage automatique, 9em); qui dit "Faites les colonnes 9em large chacune, et insérez-en autant que vous le pouvez dans le conteneur de grille".
Remarque: cela prend aussi nos gouttières, les fossé, en compte.
Le conteneur de ces démos a un arrière-plan sombre indiquant clairement l'espace disponible et vous verrez qu'il n'a pas été complètement rempli dans le dernier exemple. Alors, comment faisons-nous cela?
le min max() Cette fonction nous permet de définir une taille minimale et maximale pour une piste, ce qui permet à Grid de fonctionner en leur sein. Par exemple, nous pourrions configurer trois colonnes, les deux premières faisant 1fr de large, les dernières un maximum de 1fr, mais ne réduisant pas plus de 160px:
Grille-modèle-colonnes: 1fr 1fr minmax (160px, 1fr);
Toutes les colonnes seront réduites à mesure que vous réduirez la fenêtre, mais la dernière colonne ne sera poussée que jusqu’à présent. Regarde.
Retour à notre remplissage automatique démo, si nous devions changer la largeur de notre colonne pour minmax (9em, 1fr) Grid placerait autant de pistes que possible, mais les étendrait ensuite à 1 fr maximum jusqu'à ce que le conteneur soit rempli:
Caveat: La grille recalculera les pistes lors du rechargement de la page (essayez d’écraser la fenêtre du navigateur et de cliquer sur rafraichir), mais ne le fera pas lors du redimensionnement de la fenêtre. Les requêtes multimédias peuvent être utilisées pour modifier les valeurs, mais elles ne seront toujours pas lues avec le redimensionnement de la fenêtre..
Terminons avec quelques balles:
Accentsconagua
grille-template-zones (et d'autres choses) pour différents scénarios.remplissage automatique le mot clé est utile pour remplir les conteneurs de la grille.min max() compléments de fonction remplissage automatique bien, s'assurer que les contenants sont bien remplis, mais ne nous donne pas la «réactivité» au vrai sens du mot.Avec les leçons apprises dans cette série, vous êtes armé pour commencer à jouer avec Grid! Restez à l'écoute pour plus de tutoriels sur la grille, d'exercices pratiques, de solutions aux problèmes de mise en page courants et de mises à jour..
