CSS怎么分四格？大致可以分為以下幾個步驟：

/* 1. 首先我們需要定義一個外層容器，用于承載四個格子 */
.container {
display: flex;
flex-wrap: wrap;
}
/* 2. 然后定義四個內部格子，使用百分比定位方式，使其合理分布在外層容器中 */
.box {
position: relative;
width: 45%; /* 兩個格子的寬度 */
height: 200px; /* 格子高度 */
}
/* 3. 再定義內部陰影效果 */
.box::before,
.box::after {
content: "";
position: absolute;
z-index: -1;
}
.box::before {
top: 10px;
left: 10px;
right: -10px;
bottom: -10px;
box-shadow: inset 6px 6px 6px rgba(0,0,0,0.5);
}
.box::after {
top: -10px;
left: -10px;
right: 10px;
bottom: 10px;
box-shadow: inset -6px -6px 6px rgba(255,255,255,0.5);
}

執行完以上步驟后，你就可以成功地把一個容器分成四個格子了。