我正在學習CSS grid Youtube CSS教程。我遇到了一個問題，根據我的代碼，即使它們很相似，但性能也不如教程。我用vscode編碼，然后我轉到codepen，因為它與教程中使用的環境相同。不幸的是，我的頁面仍然沒有響應。
<body>
<div class="mainContainer">
<nav>Navbar</nav>
<main>
Main
</main>
<div id="sidebar">Sidebar</div>
<div id="content1">Content1</div>
<div id="content2">Content2</div>
<div id="content3">Content3</div>
<footer>Footer</footer>
</div>
</body>
CSS文件如下。
.mainContainer{
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: .2fr 1.5fr 1.2fr .3fr;
grid-template-areas:
'nav nav nav nav'
'sidebar content1 content2 content3'
'sidebar main main main'
'footer footer footer footer';
grid-gap: 0.2rem;
}
nav {
background-color: #a7ffeb;
grid-area: nav;
}
main {
background-color: #84ffff;
grid-area: main
}
#sidebar {
background-color: #18ffff;
grid-area: sidebar;
}
#content1 {
background-color: #6fffd2;
grid-area: content1;
}
#content2 {
background-color: #6fffd2;
grid-area: content2;
}
#content3 {
background-color: #6fffd2;
grid-area: content3;
}
footer{
background-color: #1de961;
grid-area:footer;
};
/*Responsive section of the page*/
@media only screen and (max-width : 550px) {
.mainContainer {
grid-template-columns: 1fr;
grid-template-rows: 0.4fr 0.4fr 1.2fr 1.2fr 1.2fr 2.2fr 1fr;
grid-template-areas:
'nav'
'sidebar'
}
}
css中的注釋類型錯誤
你應該使用
由于注釋錯誤，代碼的響應部分不起作用。這里還缺少一個分號
希望這能解決你的問題。
編輯：只需復制粘貼YouTuber在代碼筆中提供的CSS，看看有什么不同。