W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  display: grid;
  grid-template-areas:
    "header header"
    "menu content"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  gap: 5px;
  background-color: #2196F3;
  padding: 5px;
}
.container > div {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px;
}
.container > div.header {
  grid-area: header;
  text-align: center;
}
.container > div.menu {
  grid-area: menu;
}
.container > div.content {
  grid-area: content;
}
.container > div.footer {
  grid-area: footer;
}
</style>
</head>
<body>

<h1>CSS Grid Layout</h1>

<p>The Grid Layout Module offers a grid-based layout system, with rows and columns.</p>
<p>The Grid Layout Module makes it easy to design complex and responsive web pages without using floats and positioning:</p>

<div class="container">
  <div class="header"><h2>My Header</h2></div>
  <div class="menu"><a href="#">Link 1</a><br><a href="#">Link 2</a><br><a href="#">Link 3</a></div>
  <div class="content"><h3>Lorem Ipsum</h3><p>Lorem ipsum odor amet, consectetuer adipiscing elit. Ridiculus sit nisl laoreet facilisis aliquet. Potenti dignissim litora eget montes rhoncus sapien neque urna. Cursus libero sapien integer magnis ligula lobortis quam ut.</p></div>
  <div class="footer"><h4>Footer</h4></div>
</div>

</body>
</html>