Question 185516 in Html Question posted in
Some basic documentation can be found here.

Html – Change a grid website template from 3 column to 2 column

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

Tags:

2

Answers


  1. 0

    is a block element which like which is let develpoer more easy to know the part in HTML, and it was born with HTML5.

    You just use it like div and it will be fine.

    Login or Signup to reply.
  2. 0

    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";
    1. 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";
    1. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search