在網頁設計中，小方塊排列常被用來展示信息或者作為網頁背景。CSS提供了多種方法實現小方塊排列，這篇文章將會介紹幾種實現方法。

/* 1. 使用 grid 屬性 */
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.container div {
height: 30px;
background: #333;
}
/* 2. 使用 flex 屬性 */
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.container div {
width: 30%;
margin: 10px;
height: 30px;
background: #333;
}
/* 3. 使用 float 屬性 */
.container {
overflow: hidden;
}
.container div {
float: left;
width: 30%;
margin: 10px;
height: 30px;
background: #333;
}
/* 4. 使用 inline-block 屬性 */
.container {
font-size: 0;
letter-spacing: -4px;
word-spacing: -4px;
}
.container div {
display: inline-block;
width: 30%;
height: 30px;
margin: 10px;
background: #333;
}
/* 5. 使用 table-cell 屬性 */
.container {
display: table;
width: 100%;
}
.container div {
display: table-cell;
width: 33%;
height: 30px;
background: #333;
}

這些方法各有優缺點，可以根據實際情況選擇最適合的方法。需要注意的是，在實現小方塊排列的時候，應該確保小方塊的大小和間距都是一致的，使得排列看起來整齊美觀。