現在在Web開發中廣泛使用的CSS樣式布局，包括以下幾種：

. 柵格布局(Grid Layout)
. 彈性布局(Flexbox Layout)
. 流式布局(Fluid Layout)
. 響應式布局(Responsive Layout)

柵格布局

柵格布局是一種基于柵格系統的布局方式，將頁面分成多個等寬的列，然后在列中放置內容。柵格布局可以使得頁面結構更加整齊美觀，易于維護和擴展。

/* 柵格布局樣式 */
.container { 
display: grid; 
grid-template-columns: repeat(12, 1fr); 
grid-gap: 1rem; 
}
.item { 
grid-column: span 6; 
}

彈性布局

彈性布局是一種基于容器和項目的布局方式，對容器和項目設置屬性來控制布局。彈性布局可以使得頁面適應不同屏幕大小和不同設備的頁面布局。

/* 彈性布局樣式 */
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.item {
width: 50%;
height: 50%;
}

流式布局

流式布局是一種基于百分比的布局方式，將頁面元素的尺寸設置為百分比值，以響應不同尺寸的顯示設備。流式布局可以使頁面在不同設備上呈現相似的效果，但在高分辨率屏幕上會有模糊的問題。

/* 流式布局樣式 */
.container {
width: 100%;
}
.item {
width: 50%;
height: 50%;
}

響應式布局

響應式布局是一種多種布局方式的組合。它可以使用柵格布局、彈性布局、流式布局等方式來達到頁面在不同大小的設備上呈現最佳的排版效果。響應式布局可以讓頁面支持多種顯示設備，優化頁面的用戶體驗。

/* 響應式布局樣式 */
@media (min-width: 768px) { 
.container { 
display: grid; 
grid-template-columns: repeat(12, 1fr); 
grid-gap: 1rem; 
}
.item { 
grid-column: span 6; 
}
}
@media (max-width: 767px) { 
.container { 
display: flex;
flex-direction: column; 
align-items: center;
}
.item { 
width: 100%; 
margin-bottom: 1rem;
}
}

以上就是現在常用的CSS樣式布局方式，在Web開發中它們的應用非常廣泛，程序員們可以根據不同的項目需求來選擇最合適的布局方式。