CSS布局是網頁設計中非常重要的一部分，它可以讓我們在網頁中實現不同的布局效果。在本文中，我們將介紹一些常見的布局方式。

/* 居中布局 */
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 網格布局 */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
}
/* 彈性盒子布局 */
.flex-container {
display: flex;
justify-content: center;
align-items: center;
}
/* 浮動布局 */
.left {
float: left;
}
.right {
float: right;
}
/* 定位布局 */
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
}
/* 多列布局 */
.columns {
column-count: 3;
column-gap: 20px;
}
/* 響應式布局 */
@media screen and (max-width: 600px) {
.mobile {
display: none;
}
}
@media screen and (min-width: 601px) {
.desktop {
display: none;
}
}

以上是一些常見的CSS布局方式，我們可以根據需要選擇適合自己的布局方式。同時，需要注意到響應式布局在現代網頁中越來越重要，需要掌握CSS媒體查詢的基本用法，實現不同屏幕尺寸下的布局效果。