通常提到的佈局，有兩個共同點：
- 大多數用於 PC 端，因爲 PC 端屏幕像素寬度夠大，可佈局的空間也大；
- 佈局是有限空間內的元素排列方式，因爲頁面設計橫向不滾動，縱向無限延伸，所以大多數時候討論的佈局都是對水平方向進行分割。
按分列數目可分爲四類：
- 單列布局；
- 2 列布局；
- 3 列布局；
- 垂直三欄佈局。
單列布局
單列布局是最常用的一種佈局，它的實現效果就是將一個元素作爲佈局容器，通常設置一個較小的（最大）寬度來保證不同像素寬度屏幕下顯示一致。
2 列布局
2 列布局使用頻率也非常的高，實現效果就是將頁面分割成左右寬度不等的兩列，寬度較小的列設置爲固定寬度，剩餘寬度由另一列撐滿。爲了描述方便，我們暫且稱寬度較小的列父元素爲次要佈局容器，寬度較大的列父元素爲主要佈局容器。
3 列布局
3 列布局按照左中右的順序進行排列，通常中間列最寬，左右兩列次之。3 列布局和 2 列布局類似，也有明確的主次關係，只是關係層次增加了一層。
2列3列布局實現
單列布局沒有太多技術難點，通過將設置佈局容器（最大）寬度以及左右邊距爲 auto 即可實現。
要實現 2 列布局或 3 列布局，可以按照下面的步驟來操作：
- 爲了保證主要佈局容器優先級，應將主要佈局容器寫在次要佈局容器之前；
- 將佈局容器進行水平排列；
- 設置寬度，即次要容器寬度固定，主要容器撐滿；
- 消除佈局方式的副作用，如浮動造成的高度塌陷；
- 爲了在窄屏下也能正常顯示，可以通過媒體查詢進行優化。
垂直三欄佈局
這種佈局將頁面分成上、中、下三個部分，上、下部分都爲固定高度，中間部分高度不定。當頁面高度小於瀏覽器高度時，下部分應固定在屏幕底部；當頁面高度超出瀏覽器高度時，下部分應該隨中間部分被撐開，顯示在頁面最底部。
這種佈局也稱之爲”sticky footer“，意思是下部分粘黏在屏幕底部。要實現這個功能，最簡單的就是使用 flex 或 grid 進行佈局。