Change a grid website template from 3 column to 2 column

Question

Edit: still in need of help with this question

I need to completely delete the <nav> item from the HTML and CSS

The problem is that I don't understand grid layouts, I am learning, so I don't really know how to do it and the 1fr part and the minmax(75px, auto) /* Nav */ I cannot understand that part in this template.

body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-areas: "header header header" "nav content side" "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-gap: 10px;
  height: 100vh;
}

header {
  grid-area: header;
  background: #baffc9;
  height: 100px;
}

nav {
  grid-area: nav;
  margin-left: 0.5rem;
  background: red;
}

main {
  grid-area: content;
}

aside {
  grid-area: side;
  margin-right: 0.5rem;
  background: #ffdfba;
}

footer {
  grid-area: footer;
  background: #bae1ff;
  height: 100px;
}

@media (max-width: 768px) {
  .container {
    grid-template-areas: "header" "nav" "content" "side" "footer";
    grid-template-columns: 1fr;
    grid-template-rows: auto/* Header */
    minmax(75px, auto)/* Nav */
    1fr/* Content */
    minmax(75px, auto)/* Sidebar */
    auto;
    /* Footer */
  }
  nav,
  aside {
    margin: 0;
  }
}

<div class="container">
  <header>
    this is the header
  </header>
  <nav>
    this red one must die
  </nav>
  <main>
    this is the main
  </main>
  <aside>
    this is the aside
  </aside>
  <footer>
    this is the footer
  </footer>
</div>

I would like to understand and to completely delete this item from the CSS to learn how it is done

Answer 1

Let's decrypt step by step what's going on and what changes are needed.

Desktop

1. grid-template-areas

grid-template-areas: 
  "header header header" 
  "nav content side" 
  "footer footer footer";

It represents the area of the grid.
Every line is one line of your grid, every item in each line is a column.
It means:

• the header area will occupy the first line and span across the 3 columns
• the second line will have 3 columns, first is occupied by the nav, second is for the content, third for the side
• the footer will occupy the third line and span across the 3 columns

If you want to remove the nav, you'll get a layout with only 2 columns:

grid-template-areas: 
  "header header" 
  "content side" 
  "footer footer";

2. grid-template-columns

  grid-template-columns: 200px 1fr 200px;

It means that the first and the third columns will take 200px, the second one will take the remaining space.
You need to remove the first column:

  grid-template-columns: 1fr 200px;

Mobile

1. grid-template-areas You just need to remove the nav area:

  grid-template-areas: "header" "content" "side" "footer";

2. grid-template-rows: The nav area was the second row, you can simply delete it:

    grid-template-rows: auto/* Header */
    1fr/* Content */
    minmax(75px, auto)/* Sidebar */
    auto;
    /* Footer */

If you want to understand what minmax(75px, auto)/* Nav */ means, it's quite straight forward:
The nav would have had a minimum height of 75px and a maximum height auto so it would have taken the space needed by it's content.

body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-areas: "header header" "content side" "footer footer";
  grid-template-columns: 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-gap: 10px;
  height: 100vh;
}

header {
  grid-area: header;
  background: #baffc9;
  height: 100px;
}

main {
  grid-area: content;
}

aside {
  grid-area: side;
  margin-right: 0.5rem;
  background: #ffdfba;
}

footer {
  grid-area: footer;
  background: #bae1ff;
  height: 100px;
}

@media (max-width: 768px) {
  .container {
    grid-template-areas: "header" "content" "side" "footer";
    grid-template-columns: 1fr;
    grid-template-rows: auto/* Header */
    1fr/* Content */
    minmax(75px, auto)/* Sidebar */
    auto;
    /* Footer */
  }
  aside {
    margin: 0;
  }
}

<div class="container">
  <header>
    this is the header
  </header>
  <main>
    this is the main
  </main>
  <aside>
    this is the aside
  </aside>
  <footer>
    this is the footer
  </footer>
</div>