Comment créer : mise en page de blog

Page précédente Mise en page en forme de Z
Page suivante Conversion de poids

Apprenez à créer une mise en page de blog réactive en utilisant CSS.

Apprenez à créer une mise en page de blog réactive qui change entre deux colonnes et une colonne pleine largeur en fonction de la largeur de l'écran.

Ajustez la taille de la fenêtre du navigateur pour voir l'effet réactif :

Essayez personnellement

Comment créer une mise en page de blog

Étape 1 - Ajouter HTML :

<div class="header">
  <h2>Nom du blog</h2>
</div>
<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>Titre en gras</h2>
      <h5>Description du titre, 7 décembre 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Quelques textes...</p>
    </div>
    <div class="card">
      <h2>Titre en gras</h2>
      <h5>Description du titre, 2 septembre 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Quelques textes...</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2 À propos de moi</h2>
      <div class="fakeimg" style="height:100px;">Image</div>
      <p>Quelques textes à propos de moi en culpa qui officia deserunt mollit anim.</p>
    </div>
    <div class="card">
      <h3>Articles populaires</h3>
      <div class="fakeimg">Image</div><br>
      <div class="fakeimg">Image</div><br>
      <div class="fakeimg">Image</div>
    </div>
    <div class="card">
      <h3>Suivez-moi</h3>
      <p>Quelques textes...</p>
    </div>
  </div>
</div>
<div class="footer">
  <h2>Pied de page</h2>
</div>

Deuxième étape - Ajouter CSS :

* {
  box-sizing: border-box;
}
body {
  font-family: Arial;
  padding: 20px;
  background: #f1f1f1;
}
/* En-tête de page / titre de blog */
.header {
  padding: 30px;
  font-size: 40px;
  text-align: center;
  background: white;
}
/* Créer deux colonnes inégales qui flottent l'une à l'autre */
/* Colonne de gauche */
.leftcolumn {
  float: left;
  width: 75%;
}
/* Colonne de droite */
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}
/* Image factice */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
/* Ajouter un effet de carte à l'article */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
/* Nettoyer le flot après les colonnes */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Pied de page */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
/* Réponse aux médias - Lorsque la largeur de l'écran est inférieure à 800px, aligner deux colonnes empilées plutôt que côte à côte */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

Essayez personnellement