Éditeur Tryit de W3Schools

<!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

.container {
affichage: grille;
grid-template-columns: repeat(12, [col-start] 1fr);
écart: 20px;
}

nav ul {
liste-style: none;
marge: 0;
padding: 0;
}

/* Mobile first */
.container > * {
bordure: 1px solide vert;
couleur-de-fond: beige;
padding: 10px;
grid-column: col-start / span 12;
}

@media (min-width: 576px) {
.sidebar {
grid-column: col-start / span 3;
grid-row: 3;
}
.ads {
grid-column: col-start / span 3;
}
.content, .footer {
grid-column: col-start 4 / span 9;
}
nav ul {
afficher: flex;
justify-content: space-between;
}
}

@media (min-width: 768px) {
.nav {
grid-column: col-start / span 2;
grid-row: 2 / 4;
}
.content {
grid-column: col-start 3 / span 8;
grid-row: 2 / 4;
}
.sidebar {
grid-column: col-start 11 / span 2;
}
.ads {
grid-column: col-start 11 / span 2;
}
.footer {
grid-column: col-start / span 12;
}
nav ul {
flex-direction: colonne;
}
}
</style>
</head>
<body>

<div class="container">
  <header class="head">Header/Logo de l'entreprise</header>
  <nav class="nav">
    <ul>
      <li><a href="#">Lien 1</a></li>
      <li><a href="#">Lien 2</a></li>
      <li><a href="#">Lien 3</a></li>
    </ul>
  </nav>
  <div class="content">
    <h1>Zone de contenu</h1>
    <p>Ici, nous affichons les sections dans l'ordre source pour les écrans de moins de 576 pixels de large.</p>
    <p>Ensuite, nous passons à une mise en page à deux colonnes pour les écrans entre 576 et 767 pixels de large.</p>
    <p>Ensuite, nous passons à une mise en page à trois colonnes pour les écrans de plus de 767 pixels de large.</p>
    <p>Redimensionnez la fenêtre du navigateur pour voir l'effet réactif.</p>
  </div>
  <div class="sidebar">Barre latérale</div>
  <div class="ads">Annonces</div>
  <footer class="footer">Le pied de page</footer>
</div>

</body>

</html>