Résoudre les problèmes avec CSS Grid et Flexbox : La carte UI

Le modèle de « carte » a connu beaucoup de succès ces derniers temps, mais la façon dont nous le construisons est encore limitée à cause des CSS dont nous disposons. Jusqu'à présent, voilà. En combinant CSS Grid et Flexbox, nous pouvons faire des cartes qui s’alignent parfaitement, sont responsive, et s’adaptent au contenu en leur sein. Nous allons voir comment !

Ce que nous allons construire

Nous allons construire cette carte UI (consultez la version pleine page pour avoir une idée plus claire) :

À divers breakpointst, l’arrangement de la carte se modifiera comme suit :

CSS Grid vs Flexbox

Quand Flexbox a fait son entrée sur la scène, CSS a crié d'une joie qu'on pouvait entendre à travers le monde ; Enfin, nous avons eu un module de mise en page pour résoudre toutes nos frustrations float. Mais ce n’était pas vraiment le cas. Flexbox fonctionne mieux pour distribuer les éléments le long d'un axe unique ; que ce soit horizontalement le long d’une ligne, ou verticalement sous forme de colonne. Construire un réseau véritablement fluide avec Flexbox est difficile.

Grid, toutefois, est conçue pour mettre en pages des éléments à travers deux axes (ou dimensions) ; horizontalement et verticalement. Dans ce tutoriel nous allons utiliser chacun d’eux pour le but pour lequel il est prévu, nous donnant une solution vraiment solide. Commençons !

Source d’inspiration

bbc.co.uk a lancé récemment (en version bêta) leur dernière itération, propre et spacieuse avec leur carte UI. Ignorant les titres misérables, c’est superbe.

Les cartes supérieures sont construites et alignées sur la rangée avec Flexbox, mais nous allons étendre la mise en pages à l’aide de Grid.

Remarque : pour suivre tout au long vous aurez besoin d’un navigateur qui prend en charge Grid. Voici quelques infos pour vous aider à démarrer.

Notre balisage de carte

Commençons avec un wrapper pour notre grille <div class="band">, certains éléments de la grille pour tout arranger <div class="item"> et certains ancres (chaque ancre sera une carte) :

  <div class="band">
  
    <!-- grid item, containing a card -->
    <div class="item-1">
          <a href="" class="card">
            <div class="thumb"></div>
            <article>
              <h1>Post title</h1>
              <span>Author</span>
            </article>
          </a>
    </div>
    
    <!-- grid item, containing a card -->
    <div class="item-2">
    ...
    </div>
    
    <!-- grid item, containing a card -->
    <div class="item-3">
    ...
    </div>
    
  </div>

Placez autant de cartes que vous le souhaitez ; nous en utiliserons sept. Chacun a une vignette <div class="thumb"> qui nous donnera une image d’arrière-plan par la suite. Puis il y a une balise <article>, qui à son tour contient une balise <h1>, une <span> pour l’auteur et peut-être même un <p> pour plus d’informations.

Bases de Grid

Maintenant nous allons lancer quelques styles en disposant chacun de ces éléments dans une grille.

Remarque : si il s’agit de votre première incursion dans « Grid » vous pouvez vous mettre au diapason en lisant les didacticiels initiaux de Understanding CSS Grid Layout.

Nous irons mobile-first ici, donc les premiers styles donneront à notre enveloppe une largeur et le centreront, puis nous définirons certaines règles de Grid :

.band {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
  
  display: grid;
  
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-gap: 20px;
}

Plus important encore, ici nous indiquons que nos .band seront display: grid;. Nous déclarons ensuite grid-template-columns de 1fr, qui dit que chaque colonne prendra une seule fraction de celles disponibles. Nous en avons seulement déclaré une pour l’instant, donc chaque colonne remplira toute la largeur.

Puis nous déclarons grid-template-rows: auto;. C’est effectivement la valeur par défaut, alors nous pourrions l'avoir omise et cela signifie que les hauteurs de ligne seront déterminées uniquement par le contenu.

Enfin, nous définissons un grid-gap de 20px, qui nous donne nos gouttières de lignes et de colonnes.

Media Query Numero Uno

Sur les wider viewports (500px est tout à fait arbitraire), on va changer les grid-template-columns pour nous donner une possibilité de deux cartes par ligne. Maintenant, il y a deux colonnes, chacune étant l’une des deux fractions disponibles.

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

Media Query Numero Dos

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

@media only screen and (min-width: 850px) {
  .band {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

Ici nous pourrions également avoir écrit repeat(4, 1fr) au lieu de 1fr 1fr 1fr 1fr. Pour plus d’informations sur comment l’unité fr fonctionne, consultez CSS Grid Layout: Fluid Columns and Better Gutters.

Donc qu'est-ce que ça nous a donné ?

Styler les cartes

Cela nous a donné une mise en pages de grille assez solide, et si vous êtes un fan de brutalisme vous pouvez garder ce genre de choses, mais pour tout le monde nous allons rendre nos cartes un peu plus cartes.

Nous allons commencer par ceci :

.card {
  background: white;
  text-decoration: none;
  color: #444;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

Cela nous donne quelques styles de base : arrière-plan blanc, pas de soulignement pour le texte, une couleur grise et une box-shadow propre pour nous donner de la profondeur.

Ensuite, nous déclarons que la carte soit display: flex;. C’est important – nous allons aligner le contenu de la carte verticalement, à l’aide de Flexbox. C’est pourquoi nous déclarons également flex-direction: column; pour nous donner notre axe vertical. Enfin, nous déclarons min-height: 100%; afin que toutes les cartes comblent la hauteur du parent (notre élément de grille). Beau boulot ! Qui nous donne ceci :

État de survol

Nous allons faire quelques autres améliorations avant de plonger davantage dans Flexbox. Ajoutons une position: relative; et une transition pour que nous puissions déplacer la carte au survol :

  position: relative;
  top: 0;
  transition: all .1s ease-in;

Puis au survol, soulevons la carte légèrement et rendons l’ombre plus prononcée :

.card:hover {
  top: -2px;
  box-shadow: 0 4px 5px rgba(0,0,0,0.2);
}

Typographie

Maintenant, nous allons ajouter quelques styles généraux à la typographie pour altérer les couleurs et l’espacement.

.card article {
  padding: 20px;
}

/* typography */
.card h1 {
  font-size: 20px;
  margin: 0;
  color: #333;
}

.card p { 
  line-height: 1.4;
}

.card span {
  font-size: 12px;
  font-weight: bold;
  color: #999;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 2em 0 0 0;
}

Voici ce que vous devriez avoir :

Vignettes

Chaque vignette sera appliquée comme image d'arrière-plan, donc nous allons ajouter quelques balises dans toutes les tableaux, comme ceci :

<div class="thumb" style="background-image: url(thumb.jpg);"></div>

Maintenant, nous nous assurerons que les divs .thumb ont certaines dimensions, et que les images de fond les remplissent correctement :

.card .thumb {
  padding-bottom: 60%;
  background-size: cover;
  background-position: center center;
}

Beau boulot, qui nous donne ceci :

Article Flexbox

Maintenant, nous voulons que le nom de l’auteur soit aligné en bas de la carte, quelle que soit la quantité de contenu qu'il y a au-dessus de lui. C'est là que Flexbox intervient à nouveau :

.card article {
  padding: 20px;
  flex: 1;
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Nous utilisons le raccourci flex: 1; pour déclarer que cet élément flex (c’est encore un enfant du conteneur flex original) croisse pour occuper tout l’espace disponible.

Ensuite, nous déclarons que l’article est un conteneur flex à part entière, et encore une fois nous déclarons flex-direction: column; pour nous donner la distribution verticale. Enfin, justify-content: space-between; déclare que tous les éléments flex devraient être répartis uniformément le long de l’axe, avec espacement égal.

Tout ça est très bien, mais nous donne ces étranges, errants paragraphes au milieu de nos cartes.

Pour les aligner correctement, nous allons ajouter flex-grow: 1; (ou simplement flex: 1;), ainsi ils remplissent tout l’espace vertical restant, s’alignant joliment vers le haut.

.card p { 
  flex: 1; /* make p grow to fill available space*/
  line-height: 1.4;
}

Mieux !

Modification de Grid

À ce stade nous sommes assez bien enveloppé, mais la seule chose que Grid nous permet de faire est maintenant de complètement changer la disposition en plaçant nos éléments de grille, où nous le souhaitons, et à n’importe quelle taille que nous voulons. Pour cette démonstration, nous avons voulu rendre la première carte (appelons-le notre « carte vedette ») large de deux colonnes pour tout autre chose que les plus petites fenêtres.

Dans notre première media query, nous allons procédez comme suit :

@media only screen and (min-width: 500px) {

    ...
    
  .item-1 {
    grid-column: 1/ span 2;
  }
  
}

Avec nostalgie à notre tutoriel d’introduction sur les zones de grille, ici nous disons que, au-delà de 500px, le premier élément devrait commencer sur la ligne de grille 1 et s’étendre sur deux pistes. Le reste des éléments de la grille se mettent en place automatiquement.

Au sein de cette même requête j’ai également heurté la font-size du titre dans notre carte en vedette.

Conclusion

Cela a été un bon exercice d'utiliser Grid avec Flexbox ; Grid a pris en charge notre mise ne pages principale bidimensionnelle, puis Flexbox a géré la distribution verticale des éléments au sein de nos cartes. Prenez du plaisir à jouer avec !

Lectures supplémentaires

• Understanding CSS Grid Layout série de tutoriels
• Should I use Grid or Flexbox? par Rachel Andrew
• Designing Card-Based User Interfaces sur Smashing Magazine
  
• Page d’accueil bêta de bbc.co.uk 
• Quick Tip: Add a @supports CSS File to Your CodePen Demos