CSS是網頁設計中最基本的技術之一，它可以幫助我們實現網頁布局，使得網頁看起來更加美觀。下面我們來學習一下如何使用CSS進行網頁布局。

效果圖：https://i.imgur.com/IOwJh35.png
html代碼如下：
<div class="container">
<header>Header</header>
<nav>Navigation</nav>
<article>Article</article>
<aside>Sidebar</aside>
<footer>Footer</footer>
</div>
CSS代碼如下：
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
grid-gap: 20px;
}
header, nav, article, aside, footer {
padding: 20px;
background-color: #eee;
}
header {
grid-row: 1/2;
}
nav {
grid-row: 2/3;
}
article {
grid-row: 2/3;
}
aside {
grid-row: 2/3;
}
footer {
grid-row: 3/4;
}

以上代碼實現了一個典型的網頁布局，其中header為頁面頭部，nav為頁面導航，article為頁面正文，aside為頁面側邊欄，footer為頁面尾部。

我們首先定義了一個container類，并以grid（網格）的布局方式來排版。其中grid-template-columns定義了容器的列數和寬度，這里設置為1欄，即一整個頁面都是一欄，并且欄的寬度由1fr定義，這里的含義是自動計算容器的剩余空間，分配給所有的列。

grid-template-rows用于定義容器的行數和高度，其中auto表示高度按內容自適應，1fr表示高度占據剩余空間的1fr。

grid-gap用于定義網格之間的間距，這里設置為20px。

接下來通過選擇器的方式對header、nav、article、aside、footer這些元素進行樣式設置，統一都設置了一個20px的padding和#eee的背景色。

最后通過grid-row將元素放置在頁面對應的位置上，grid-row: 1/2表示這個元素放在第一行開始，第二行結束的位置上，同理，nav、article、aside都是放在第二行的位置上，而footer則是放在第三行的位置上。

通過以上的方式，我們可以靈活的控制網頁的布局，讓網頁看起來更美觀、更舒適。