W3Schools Tryit Éditeur

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}

body {
font-family: "Lucida Sans", sans-serif;
taille de police: 17px;
}

.grid-container {
affichage: grille;
zones-de-modèle-de-grille:
<header>en-tête</header>
'menu'
'principal'
'faits'
'footer';
couleur-de-fond: blanc;
écart: 10px;
}

.header {
zone-de-grille: en-tête;
couleur-de-fond: violet;
text-align: center;
couleur: #ffffff;
}

.header > h1 {
taille-de-police: 40px;
}

.menu {
zone-de-grille: menu;
}
  
.menu ul {
list-style-type: none;
marge: 0;
padding: 0;
}

.menu li {
padding: 8px;
marge-inférieure: 7px;
couleur de fond: #33b5e5;
couleur: #ffffff;
}

.menu li:hover {
couleur de fond: #0099cc;
}
  
.content {
zone-de-grille: principal;
}

.content > h1 {
taille-de-police: 30px;
marge-inférieure: 7px;
}

.content > p {
marge-inférieure: 7px;
}

.facts {
zone-de-grille: faits;
bordure: 1px solide #0099cc;
couleur-de-fond: beige;
padding: 10px;
}

.facts > h2 {
taille de police: 20px;
}

.facts li {
marge-inférieure: 5px;
}

.footer {
zone-de-grille: pied-de-page;
couleur de fond: #0099cc;
couleur: #ffffff;
text-align: center;
}

@media (min-width: 600px) {
.header {grid-area: 1 / span 6;}
.menu {grid-area: 2 / span 1;}
.content {grid-area: 2 / span 4;}
.facts {grid-area: 3 / span 6;}
.footer {grid-area: 4 / span 6;}
}

@media (min-width: 768px) {
.header {grid-area: 1 / span 6;}
.menu {grid-area: 2 / span 1;}
.content {grid-area: 2 / span 4;}
.facts {grid-area: 2 / span 1;}
.footer {grid-area: 3 / span 6;}
}
</style>
</head>
<body>

<div class="header"><h1>Chania</h1></div>

<div class="menu">
  <ul>
    <li>Le Vol</li>
    <li>La Ville</li>
    <li>L'île</li>
    <li>La nourriture</li>
  </ul>
</div>

<div class="content">
  <h1>La Ville</h1>
  <p>Chania est la capitale de la région de Chania sur l'île de Crète.</p>
  <p>La ville peut être divisée en deux parties, la vieille ville et la ville moderne. La vieille ville est située à côté de l'ancien port et est la matrice autour de laquelle l'ensemble de la zone urbaine a été développée.</p>
  <p>Chania se trouve le long de la côte nord-ouest de l'île de Crète.</p>
</div>

<div class="facts">
  <h2>Faits :</h2>
  <ul>
    <li>Chania est une ville sur l'île de Crète</li>
    <li>Crete est une île grecque dans la mer Méditerranée</li>
  </ul>
</div>

<div class="footer"><p>Redimensionnez la fenêtre du navigateur pour voir l'effet réactif.</p></div>
  
</div>

</body>

</html>