CSS布局是Web開發中必須掌握的一項技能。在CSS中，布局方式有多種，下面介紹幾種常用的布局方式。
1. 網格布局
網格布局是一種比較新的CSS布局方式，它使用網格來分割Web頁面。網格布局適用于復雜頁面，可以通過定義網格的行和列來實現相對簡單的布局。
網格布局的代碼如下所示：

pre {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
}

2. 彈性盒子布局
彈性盒子布局（Flexbox）是一種基于CSS3的布局模式，旨在實現更加高效和靈活的頁面布局。
Flexbox布局特點如下：
- 可以快速實現水平和垂直居中；
- 可以動態調整元素的尺寸和位置；
- 可以改變元素的順序。
Flexbox布局的代碼如下所示：

pre {
display: flex;
justify-content: center;
align-items: center;
}

3. 浮動布局
浮動布局（Float）是一種老舊的CSS布局方式，但仍然被廣泛使用。浮動布局適用于多欄布局、圖像和文字混排等情況。
浮動布局的代碼如下所示：

p {
float: left;
width: 50%;
}

以上是CSS中常用的三種布局方式，當然還有很多其他的布局方式，開發者需要根據具體情況選擇合適的方式。