CSS是一種用于網頁設計的樣式表語言，為了滿足用戶對于網頁設計的需求，CSS不斷地進行擴展，目前已經有三種擴展方法：CSS變量、CSS網格布局和CSS伸縮盒布局。 CSS變量，也被稱為自定義屬性，這是CSS Level 3的一項新功能。通過定義自定義屬性，可以在整個DOM中存儲和共享值。這些自定義屬性可以在多個地方使用，從而簡化了樣式的編寫和維護。定義一個CSS變量需要使用--前綴，如下所示：

:root {
--main-color: #ff0000;
}
p {
color: var(--main-color);
}

這樣，當我們需要更改主色調時，只需要在:root中更改一次即可實現全局變更。 CSS網格布局是一種通過網格來布局的新功能。它使得設計者可以非常容易地創建布局，并可實現多列和多行的響應式設計。在過去，網格布局可能需要使用表格和浮動處理，但這樣做會使代碼變得臃腫和難以維護。CSS網格布局提供了一種更加簡潔和可控的布局方式，如下所示：

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}
.item {
grid-column: 1 / 2;
grid-row: 1 / 2;
}

這樣，我們可以通過grid-template-columns和grid-gap來定義網格。同時，使用grid-column和grid-row來定義每個元素在網格中的位置。 CSS伸縮盒布局是一種基于彈性盒子模型的新功能。CSS伸縮盒布局使得容器和內容的尺寸可以自由調整，從而提高布局的靈活性。在過去，伸縮盒布局也可能需要使用表格和浮動處理，但這樣做會增加代碼的復雜度和難以維護。CSS伸縮盒布局提供了一種簡潔和靈活的布局方式，如下所示：

.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.item-1 {
flex-basis: 60%;
}
.item-2 {
flex-basis: 30%;
}

這樣，我們可以通過display: flex來定義容器。然后，通過flex-direction來定義伸縮盒的方向，通過justify-content來定義伸縮盒中元素的水平對齊方式。同時，使用flex-basis來定義元素的初始尺寸。 總之，CSS變量、CSS網格布局和CSS伸縮盒布局為Web設計提供更多的靈活性和控制性。它們的出現使得布局更加簡潔、易于維護和響應式。因此，學習和掌握這三種擴展方法是Web設計師們不可或缺的技能。