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
2
Answers
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.
Let’s decrypt step by step what’s going on and what changes are needed.
Desktop
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:
header
area will occupy the first line and span across the 3 columnsnav
, second is for thecontent
, third for theside
If you want to remove the
nav
, you’ll get a layout with only 2 columns: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:
Mobile
You just need to remove the nav area:
The nav area was the second row, you can simply delete it:
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 heightauto
so it would have taken the space needed by it’s content.