, une pour l'auteur, et peut-être même un

pour plus d'informations.

Bases de la grille

Commençons maintenant certains styles en organisant chacun de ces éléments dans une grille. 

Remarque: s’il s’agit de votre première incursion dans «Grid», vous voudrez peut-être vous mettre au courant en lisant les premiers tutoriels de la rubrique Présentation de la disposition en grille CSS.

Nous allons commencer par le mobile ici, donc les premiers styles donneront à notre wrapper une largeur et le centrer, puis définirons quelques règles de grille:

.bande largeur: 90%; largeur maximale: 1240px; marge: 0 auto; affichage: grille; grid-template-columns: 1fr; grid-template-rows: auto; intervalle de grille: 20px; 

Plus important encore, nous affirmons ici que notre .B: et sera affichage: grille;. Nous déclarons alors Grille-modèle-colonnes de 1fr, qui dit que chaque colonne prendra une seule fraction de celles disponibles. Nous n'en avons déclaré qu'un pour l'instant, donc chaque colonne remplira toute la largeur.

Puis nous déclarons grid-template-rows: auto;. C'est en fait la valeur par défaut. Nous aurions donc pu l'omettre. Cela signifie que la hauteur des lignes sera déterminée uniquement par le contenu..

Enfin, nous définissons un fossé de 20px, ce qui nous donne nos gouttières de colonne et de rangée.

Requête multimédia Numero Uno

Sur des fenêtres plus larges (500px est complètement arbitraire), nous allons changer le Grille-modèle-colonnes pour nous donner un possible deux cartes par ligne. Maintenant, il y a deux colonnes, chacune étant l'une des deux fractions disponibles.

@media only screen et (min-width: 500px) .band grid-template-columns: 1fr 1fr; 

Requête multimédia Numero Dos

Enfin, pour les écrans plus grands, nous choisirons une disposition à quatre colonnes..

Écran @média uniquement et (largeur minimale: 850 pixels) .band colonnes-modèle-grille: 1fr 1fr 1fr 1fr 1fr; 

Ici on aurait également pu écrire répéter (4, 1fr) au lieu de 1fr 1fr 1fr 1fr. Pour plus d'informations sur la façon dont le fr unité fonctionne, consultez CSS Grid Layout: Colonnes fluides et meilleures gouttières.

Alors qu'est-ce que cela nous a donné?

Styliser les cartes

Cela nous a donné une structure de grille assez solide, et si vous êtes un fan de brutalisme, vous voudrez peut-être garder des choses comme celles-ci, mais pour tout le monde, donnons à nos cartes un peu plus des cartes..

Nous allons commencer par ceci:

.carte fond: blanc; texte-décoration: aucun; couleur: # 444; box-shadow: 0 2px 5px rgba (0,0,0,0,1); affichage: flex; direction de flexion: colonne; hauteur minimale: 100%; 

Cela nous donne quelques styles de base: un fond blanc, pas de soulignement pour le texte, une couleur grise et une boîte ombre pour nous donner de la profondeur.

Ensuite, nous déclarons que la carte est affichage: flex;. C'est important, nous allons aligner le contenu de la carte verticalement, en utilisant Flexbox. Par conséquent, nous déclarons également direction de flexion: colonne; pour nous donner notre axe vertical. Enfin nous déclarons hauteur minimale: 100%; afin que toutes les cartes remplissent la hauteur du parent (notre élément de grille). Bon travail! Cela nous donne ceci:

Hover State

Faisons quelques améliorations avant de plonger plus avant dans Flexbox. Ajouter un position: relative; et un transition afin que nous puissions déplacer la carte en vol stationnaire:

 position: relative; en haut: 0; transition: tous les .1 s'installent facilement;

Puis, en vol stationnaire, soulevez légèrement la carte et accentuez l’ombre:

.carte: hover top: -2px; boîte-ombre: 0 4px 5px rgba (0,0,0,0,2); 

Typographie

Nous allons maintenant ajouter quelques styles généraux à la typographie pour modifier les couleurs et l’espacement..

.article de carte padding: 20px;  / * typographie * / .card h1 taille de la police: 20px; marge: 0; couleur: # 333;  .card p line-height: 1.4;  .card span taille de la police: 12px; poids de police: gras; couleur: # 999; text-transform: majuscule; espacement des lettres: 0,05 m; marge: 2em 0 0 0; 

Voici ce que vous devriez avoir:

Vignettes

Chaque vignette sera appliquée en tant qu’image d’arrière-plan, nous allons donc ajouter des balises, comme ceci:

Maintenant, nous allons nous assurer que le .pouce Les div ont des dimensions et que les images d’arrière-plan les remplissent correctement:

.carte .thumb padding-bottom: 60%; taille du fond: couverture; position de fond: centre centre; 

Bon travail, ça nous donne ceci:

Article Flexbox

Nous souhaitons maintenant que le nom de l'auteur soit aligné au bas de la carte, quel que soit le contenu au-dessus. C’est là que Flexbox intervient à nouveau:

.article de carte padding: 20px; flex: 1; affichage: flex; direction de flexion: colonne; justifier-contenu: espace-entre; 

Nous utilisons la sténographie flex: 1; pour indiquer que cet élément flex (il est toujours un enfant du conteneur flex d'origine) devrait devenir suffisamment encombrant.

Ensuite, nous déclarons que l'article est un conteneur flexible à part entière et nous déclarons à nouveau direction de flexion: colonne; nous donner une distribution verticale. enfin, justifier-contenu: espace-entre; stipule que tous les éléments flexibles doivent être répartis uniformément le long de l’axe, avec un espacement égal entre.

C'est génial, mais cela nous donne ces étranges paragraphes errants au milieu de nos cartes.

Pour les aligner correctement, ajoutons croissance flexible: 1; (ou simplement flex: 1;) pour qu'ils remplissent tout l'espace vertical restant, en s'alignant bien vers le haut.

.carte p flex: 1; / * faire croître p pour remplir l'espace disponible * / line-height: 1.4; 

Meilleur!

Modification de la grille

À ce stade, nous sommes pratiquement bouclés, mais ce que Grid nous permet de faire maintenant est de changer complètement la présentation en plaçant nos éléments de grille à l'endroit de notre choix et à la taille de notre choix. Pour cette démo, nous voulions créer la toute première carte (appelons-la notre "carte sélectionnée") large de deux colonnes pour autre chose que les plus petites vues..

Dans notre première requête média, faisons ceci:

@Media only screen et (min-width: 500px) … item-1 grid-column: 1 / span 2; 

Pour revenir à notre didacticiel d’introduction sur les zones de la grille, nous affirmons ici que, au-delà de 500 pixels, le premier élément devrait commencer à la ligne de grille 1 et s’étendre sur deux pistes. Le reste des éléments de la grille se met automatiquement en place.

Au sein de cette même requête des médias, j'ai également heurté le taille de police de la rubrique dans notre carte sélectionnée.

Conclusion

Cela a été un bon exercice d’utilisation de Grid avec Flexbox; Grid a géré notre mise en page principale en deux dimensions, puis Flexbox a géré la distribution verticale des éléments dans nos cartes. Amusez-vous à jouer avec!

Lectures complémentaires

• Comprendre la série de tutoriels sur la disposition en grille CSS
• Devrais-je utiliser Grid ou Flexbox? par Rachel Andrew
• Conception d'interfaces utilisateur basées sur des cartes dans Smashing Magazine
  
• bbc.co.uk beta homepage
• Astuce: ajoutez un fichier CSS @supports à vos démonstrations CodePen