編輯:這個問題還需要幫助嗎
我需要完全刪除& ltnav & gtHTML和CSS中的項
問題是我不理解網格布局,我正在學習,所以我真的不知道如何做,1fr部分和minmax(75px,auto) /* Nav */我不能理解這個模板中的那部分。
這里有一支帶它的筆 https://codepen.io/familias/pen/WNYQeqQ
以下是HTML代碼:
<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>
下面是CSS代碼:
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;
}
}
我想了解并從CSS中完全刪除這一項,以了解它是如何做到的
你就像div一樣用就好了。
上一篇vue與jsp區別
下一篇c 樹形結構json