Pour ce deuxième épisode (épisode 1), on commence avec un HTML plus avancé.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Laurène Ipsum, étudiante en graphisme - portfolio </title>
  <link href="https://fonts.googleapis.com/css?family=Space+Mono:400,400i,700" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
 
<body class="home">
 
  <header class="header">
    <div class="header-flex">
      <h1 class="header-logo">jenseign</h1>
      <nav class="no-mobile">
      <a href="#" class="current">portfolio</a> •
      <a href="#">contact(@)laureneipsum.com</a> •
      <a href="#">linkedIn</a> 
      </nav>
      <nav class="mobile">
        <a href="#footer-nav">≡</a>
      </nav>
    </div>
  </header>
 
  <div class="grid">
    <div class="about">Laurène Ipsum, étudiante en design graphique en 2e année à l’<em>ésad Amiens</em>.<br>
      <br>
       Actuellement à la recherche d’un <strong>stage</strong> d’un mois sur Paris, Lille ou Amiens pour la période juillet-août.</div>
    <img src="https://dummyimage.com/400x600/6100ff/fff&text=%20" class="m" alt="affiche">
    <img src="https://dummyimage.com/400x288/00B3ED/fff&text=%20" class="s" alt="site">
    <img src="https://dummyimage.com/400x600/FFDE13/fff&text=%20" class="m" alt="affiche">
    <img src="https://dummyimage.com/400x288/FF5046/fff&text=%20" class="s" alt="site">
    <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">
    <img src="https://dummyimage.com/400x600/FF6600/fff&text=%20" class="m" alt="affiche">
    <img src="https://dummyimage.com/400x288/6100ff/fff&text=%20" class="s" alt="site">
    <img src="https://dummyimage.com/400x600/00B3ED/fff&text=%20" class="m" alt="site">
    <img src="https://dummyimage.com/400x288/FF5046/fff&text=%20" class="s" alt="site">
  </div>
 
  <footer class="footer">
    <nav id="footer-nav">
      <a href="#" class="current">portfolio</a>
      <a href="#">contact(@)laureneipsum.com</a> •
      <a href="#">linkedIn</a> 
    </nav>
  </footer>
 
</body>
</html>

codepen

CSS, réglages et typographie

Choisir la typographie avant de coder permet de mieux ajuster votre mise en page. Dans le CSS, je commence mes projets par le réglage du box-sizing, puis de la famille de caractères.

/* la manière moderne de calculer les tailles */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
 
body{
  margin:0;
  background: #eee;
  font-family: 'Space Mono', monospace;
}

codepen

La grille automatique et centrée

Ma grille peut répéter son nombre de colonnes en auto-remplissage, ci-dessous j’obtiens une, deux, trois plus de colonnes de 400 pixels de large selon la taille de la fenêtre.

  • 2 colonnes à 892px
  • 3 à 1296px
  • 4 à 1720px
  • 5 à 2144px…

On gagne une colonne tous les 400 + 24px (largeur + gouttière).

Attention, il y a un petit piège, la présence d’un grid-row-end:span 2; vous oblige à avoir 2 colonnes minimum !
grid-template-columns: repeat(auto-fill, 400px);

Centrage des colonnes :

justify-content: center;

Combinaison des codes :

.grid{
  display:grid;
  grid-gap: 24px;
  gap:24px;
  justify-content: center;	
  margin:72px 0 24px 0;
  padding:0 24px;
  grid-template-columns: repeat(auto-fill, 400px);
  grid-auto-rows: 288px;
  grid-auto-flow: row dense;
}
 
.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;
}

Codepen

L’entête

Si vous avez lu le code, des éléments sont là pour une future version mobile, nous allons les masquer temporairement.

.footer,
.mobile{
  display:none;
}

Pour mettre un élément en position fixe sur toute la largueur, il faut définir plusieurs propriétés.

.header{
  position:fixed; /* fixe */
  z-index: 999; /* devant les autres */
  top:0; /* à 0px du coin supérieur */
  right:0; /* à droite */
  left:0; /* et à gauche => 100% */
  height:48px; /* pour le style */
  background: #fff;
  padding:0 24px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

À cette étape, ça déborder, ce n’est pas centré, on va donc ajouter la grille auto-fill sur le header.

.header{
  position:fixed;
  z-index: 999;
  top:0;
  right:0;
  left:0;
  height:48px;
  background: #fff;
  padding:0 24px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  /* la même grille que .grid */
  display:grid;
  grid-template-columns: repeat(auto-fill, 400px);
  grid-gap: 24px;
  gap:24px;
  justify-content: center;	
}

Finitions

La balise h1 possède des réglages CSS, ici je les change.

.header-logo{
  margin:0; 
  font-size:1em; /* = 16px par défaut */
}
 
.header-flex{
  grid-column: 1/-1; /* ce bloc s'étire sur les colonnes automatiques de la grille */
  display:flex; /* technique flex pour faire un « trou » */
  justify-content: space-between; /* le « trou » */
  align-items: center; /* centrage vertical */
}

portfolio grid

https://codepen.io/benoitwimart/full/bzYdPB

Suite dans l’épisode 3 (liens sur les projets, couleurs et version mobile).