田字格排布在CSS中可以通過設置display: grid來實現(xiàn)，以下是一個簡單的示例，展示如何創(chuàng)建一個4x4的田字格布局：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  gap: 10px;
}
.grid-item {
  background-color: #f0f0f0;
  border: 1px solid #000;
  padding: 20px;
  text-align: center;
}

在這個示例中，我們創(chuàng)建了一個名為.grid-container的類，用于定義田字格的整體布局。grid-template-columns和grid-template-rows屬性分別定義了每個格子的大小，1fr表示每個格子占據(jù)容器寬度的四分之一。gap屬性定義了每個格子之間的間隔。

我們創(chuàng)建了一個名為.grid-item的類，用于定義每個格子的樣式。background-color設置了格子的背景色，border設置了格子的邊框，padding設置了格子內部的填充，text-align設置了文本的對齊方式。

我們可以將.grid-container類應用到HTML元素上，以創(chuàng)建田字格布局：

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
</div>

在這個HTML示例中，我們創(chuàng)建了一個包含8個格子的田字格布局，每個格子都應用了.grid-item類，并包含了相應的樣式。