HTML中的田字格布局是一種常用的頁面布局方式。它可以使每一行中的內容等寬對齊，非常美觀和易于閱讀。下面我們就來介紹一下如何設置HTML田字格布局。

<div class="container">
<div class="row">
<div class="col-md-3">
第一列內容
</div>
<div class="col-md-3">
第二列內容
</div>
<div class="col-md-3">
第三列內容
</div>
<div class="col-md-3">
第四列內容
</div>
</div>
<div class="row">
<div class="col-md-3">
第五列內容
</div>
<div class="col-md-3">
第六列內容
</div>
<div class="col-md-3">
第七列內容
</div>
<div class="col-md-3">
第八列內容
</div>
</div>
</div>

首先，我們需要在HTML中使用一個div標簽來包裹田字格布局的內容，并將其類名設置為“container”。然后，我們可以使用多個div標簽來分行展示內容。每一行使用一個類名為“row”的div標簽來包裹。之后，在每一行中，我們將列分為四列，使用類名為“col-md-3”的div標簽來實現。

這里需要注意的是，類名“col-md-3”中的“md”表示在中等設備尺寸下應用該樣式，而數字“3”表示在布局中該列占據3份。因此，我們使用4個類名為“col-md-3”的div標簽來實現田字格布局。

除了“col-md-3”類名之外，還有其他類名可以實現不同大小的列寬，例如“col-md-6”表示在中等設備尺寸下該列占據6份。此外，我們還可以通過CSS來自定義設置每列的寬度，以達到更靈活的布局效果。