CSS是一种用于网页设计的样式语言，常用来控制网页中元素的样式，其中也包括网页布局。本文将介绍如何用CSS来实现米字格布局。

/* 设置米字格的网格线 */
.mi-grid {
display: grid;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
grid-gap: 1px;
border: 1px solid black;
}
/* 设置米字格中的内容 */
.mi-grid > * {
background-color: white;
border: 1px solid black;
}
.mi-grid > *:nth-of-type(4),
.mi-grid > *:nth-of-type(6) {
background-color: gray;
}
/* 设置米字格中心点 */
.mi-grid::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
background-color: black;
transform: translate(-50%, -50%);
}

上述代码中，我们使用了CSS的网格布局来实现米字格。其中，grid-template属性指定了网格行和列的数量，grid-gap属性指定了网格之间的间隔，border属性为网格添加了黑色的边框。在网格中的元素使用了白色背景和黑色边框，而米字格中心的点使用了黑色背景和白色边框，并使用了transform属性将其定位在米字格的中心点。

通过以上代码和方法，我们可以轻松地实现米字格布局，为网页的美观程度增添不少色彩。