九宮格的制作在CSS中通常涉及使用position屬性來(lái)定位元素，以及width和height屬性來(lái)設(shè)置元素的大小，以下是一個(gè)簡(jiǎn)單的九宮格制作示例：

1、HTML結(jié)構(gòu)：我們需要一個(gè)包含九個(gè)元素的容器。

<div class="grid">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
</div>

2、CSS樣式：我們使用CSS來(lái)制作九宮格。

.grid {
    position: relative;
    width: 300px;
    height: 300px;
}
.box {
    position: absolute;
    width: 100px;
    height: 100px;
}
.box:nth-child(1) { top: 0; left: 0; }
.box:nth-child(2) { top: 0; right: 0; }
.box:nth-child(3) { bottom: 0; left: 0; }
.box:nth-child(4) { top: 0; left: 200px; }
.box:nth-child(5) { top: 0; right: 200px; }
.box:nth-child(6) { bottom: 0; left: 200px; }
.box:nth-child(7) { top: 200px; left: 0; }
.box:nth-child(8) { top: 200px; right: 0; }
.box:nth-child(9) { top: 200px; left: 200px; }

在這個(gè)示例中，我們使用了position: absolute來(lái)使每個(gè)盒子相對(duì)于其***近的定位祖先（在這種情況下，是.grid元素）進(jìn)行定位，我們使用top、left、right和bottom屬性來(lái)調(diào)整每個(gè)盒子的位置，注意，我們需要為.grid元素設(shè)置position: relative，以便使其成為一個(gè)定位上下文。