Адаптивный веб-дизайн в CSS

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

body {
  font-family: Arial, sans-serif;
  margin: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.header {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

.menu {
  background-color: #999;
  padding: 10px;
}

.menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.menu li {
  padding: 8px;
  color: white;
}

.content {
  padding: 20px;
}

.facts {
  background-color: #ddd;
  padding: 20px;
}

.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

/* Medium screens */
@media (min-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr 1fr;
  }
  .header, .footer {
    grid-column: 1 / -1;
  }
}

/* Large screens */
@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: 150px 1fr 1fr;
  }
  .header, .footer {
    grid-column: 1 / -1;
  }
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="header"><h1>Chania</h1></div>
  <div class="menu">
    <ul>
      <li>The Flight</li>
      <li>The City</li>
      <li>The Island</li>
      <li>The Food</li>
    </ul>
  </div>
  <div class="content">
    <h1>The City</h1>
    <p>Chania is the capital of the Chania region on the island of Crete.</p>
    <p>The city can be divided in two parts, the old town and the modern city. The old town is situated next to the old harbour and is the matrix around which the whole urban area was developed.</p>
    <p>Chania lies along the north west coast of the island Crete.</p>
  </div>
  <div class="facts">
    <h2>Facts:</h2>
    <ul>
      <li>Chania is a city on the island of Crete</li>
      <li>Crete is a Greek island in the Mediterranean Sea</li>
    </ul>
  </div>
  <div class="footer"><p>Resize the browser window to see the responsive effect.</p></div>
</div>

</body>
</html>