HTML structure - GRID

https://www.w3schools.com/css/tryit.asp?filename=trycss_template1_grid

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<div class="container">
  <div id="content">

    <div class="grid-container">
      <div class="header">
        <h2>Header</h2>
      </div>

      <nav class="menu">
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/news">News</a></li>
          <li><a href="/contact">Contact</a></li>
          <li><a href="/about">About</a></li>
          <li class="search"><input type="text" name="search" placeholder="Search"></li>
        </ul>
      </nav>

      <div class="left" style="">Column</div>
      <article class="middle" style="">

        <p>
          Lorem Dorem
        </p>


      </article>
      <div class="right" style="">Column</div>

      <div class="footer">
        <p>Footer</p>
      </div>
    </div>

  </div>
</div>

CSS

html,
body {
  background: #FFFFFF;
  color: #454545;
}

.container {
  margin-top: 5%;
}

#content {
  border: 1px solid #CCCCCC;
}

* {
  box-sizing: border-box;
}

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

/* Style the header */
.header {
  grid-area: header;
  padding: 30px;
  text-align: center;
  font-size: 35px;
}

.left,
.middle,
.right,
.menu {
  background: #F9F9F9;
  border: 1px solid #CCCCCC;
  margin: 10px;
}

nav {
  padding: 0px 10px 0px 10px;
}

nav ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

nav ul li {
  margin: 0px;
  padding: 0px;
  display: inline-block;
}

nav ul li a {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
  color: #454545;
}

nav ul li input {
  padding: 0px;
  width: 75px;
  height: 20px !important;
}

nav ul li.search {
  float: right;
  height: 20px;
}

/* The grid container */
.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu menu menu menu menu menu'
    'left left middle middle right right'
    'footer footer footer footer footer footer';
  /* grid-column-gap: 10px; - if you want gap between the columns */
}

.left,
.middle,
.right {
  padding: 10px;
  /* height: 300px; */
  /* Should be removed. Only for demonstration */
}

.menu {
  grid-area: menu;
}

/* Style the left column */
.left {
  grid-area: left;
  margin-right: 15%;
}

/* Style the middle column */
.middle {
  grid-area: middle;
  margin-left: -10%;
  margin-right: -10%;
}

/* Style the right column */
.right {
  grid-area: right;
  margin-left: 15%;
}

/* Style the footer */
.footer {
  background: #F9F9F9;
  border: 1px solid #CCCCCC;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  grid-area: footer;
  padding: 10px;
  text-align: center;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .grid-container {
    grid-template-areas:
      'header...