Introduction

Voici une proposition de portfolio avec une mise en page en CSS grid. La stratégie du portfolio est la suivante :

  • Un design Mobile first, une seule colonne en version téléphone ;
  • Pas de JavaScript (pas de Masonry), c’est parfois moins pratique, mais cela permet d’avoir un coût technique réduit ;
  • Une mise en page automatique, la grille se remplit sans placement ;
  • Un entête fixe comme souvent sur les portfolios ;
  • Un menu burger ultra basique, avec navigation en pied de page sur mobile ;
  • Un court texte de présentation pour les moteurs de recherche ;
  • Une Google fonte en option, car très simple à utiliser (mais rien n’empêche de faire un choix différent).

La page d’accueil

La page d’accueil propose une grille avec gouttière et des aperçus des travaux de trois formats (S,M et L). Une approche plus simple serait d’avoir une grille de carré sans gouttière, mais cela demande un travail de recadrage plus délicat et des travaux plus homogènes.

malikafavre.com
malikafavre.com / menu entête fixe et grille de modules carrés

Pour mon objectif, mes aperçus de travaux seront préparés selon ces règles.

  • Ma gouttière est de 24px ;
  • Un format M de 400 sur 600 (le format d’une affiche, c’est ma base) ;
  • Un format S de 400 sur 288, c’est le M coupé en deux avec une gouttière (288 + 24 + 288 = 600) ;
  • Un format L de 824 sur 600, c’est le M multiplié par deux avec une gouttière (400 + 24 + 400 = 824).
  <img src="https://dummyimage.com/824x600/1FD0C0/fff&text=%20" class="l" alt="app">
  <img src="https://dummyimage.com/400x600/FF5046/fff&text=%20" class="m" alt="affiche">
  <img src="https://dummyimage.com/400x288/FFDE13/fff&text=%20" class="s" alt="site">

Mobile First

Avec un peu de CSS, on peut rendre nos images visibles sur mobile et les empêcher de déborder.

.s, .m, .l{
  max-width:100%;
  height:auto;
  display:block;
  margin-bottom:8px;
}

See the Pen dummyimage by Benoît Wimart (@benoitwimart) on CodePen.0

On reviendra sur la version mobile après l’esquisse de la grille, l’essentiel étant d’y penser et de la coder sans @media.

La grille

  .grid{
    grid-template-columns: repeat(3, 400px); /* 3 colonnes de 400px */
    grid-auto-rows: 288px; /* des lignes automatiques de 288 */
    gap: 24px; /* gap signifie gouttière */
  }

En ajoutant un conteneur avec la classe .grid autour de nos images, on obtient ceci :

See the Pen grid 01 by Benoît Wimart (@benoitwimart) on CodePen.0

Le résultat n’est pas parfait, il faut définir les dimensions des cellules.

.s{
  grid-column-end: span 1;
  grid-row-end:span 1;
}
 
.m{
  grid-column-end: span 1;
  grid-row-end:span 2;
}
 
.l{
  grid-column-end: span 2;
  grid-row-end:span 2;
}


Ce qui donne ce résultat sur codepen.

grid-auto-flow

Notre grille prend forme, mais des espaces sont inoccupés ; Grid possède une propriété magique: grid-auto-flow: row dense; qui déplace les éléments pour éviter les vides.

Voir le Codepen.

Suite dans l’épisode 02