在網頁開發中，常常需要將元素進行排列，這時候CSS二維排布就變得非常重要了。

.box {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
grid-gap: 10px;
	}

上述代碼是使用CSS網格布局實現一個3*3的元素排布，其中grid-template-columns表示列的數量和寬度，repeat(3, 1fr)表示重復三次，每次占據1個比例，grid-template-rows同理。grid-gap表示元素之間的間隔。

.box {
display: flex;
flex-wrap: wrap;
justify-content: center;
	}
	.item {
width: calc(33.33% - 10px);
margin-right: 10px;
margin-bottom: 10px;
	}

如果不使用CSS網格布局，可以使用CSS彈性盒子模型來實現元素排布，其中display: flex表示彈性盒子模型，flex-wrap表示換行方式，justify-content是內容在水平方向上的對齊方式。而.item表示的是單獨的元素，通過width來設置每個元素所占用的寬度，通過margin-right和margin-bottom來設置元素間隔。

CSS二維排布是非常重要的，它可以讓我們更加靈活和自由地進行元素排列，并且可以讓頁面的排布更加美觀和合理。