CSS工字布局是一種在網頁設計中廣泛使用的布局方式。它以工字形狀排列網頁內容，使得頁面更具有層次感和美觀性。下面我們來了解一下如何使用CSS實現工字布局。

代碼示例：
/* 容器樣式 */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/* 工字布局樣式 */
.item.one {
grid-row: 1/3;
grid-column: 1/2;
}
.item.two {
grid-row: 1/2;
grid-column: 2/3;
}
.item.three {
grid-row: 2/3;
grid-column: 2/3;
}
.item.four {
grid-row: 1/3;
grid-column: 3/4;
}
/* HTML結構 */
<div class="container">
<div class="item one">1</div>
<div class="item two">2</div>
<div class="item three">3</div>
<div class="item four">4</div>
</div>

首先我們需要在HTML中定義一個容器元素，使用CSS的grid布局來設置容器的列數。接下來，我們就可以給每個要排列的項目設置它們應該出現在哪個位置。這里我們使用了grid-row和grid-column屬性。

最后，我們只需要將每個項目的類名添加到對應的HTML標簽中，就可以實現工字布局了。