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来自定义设置每列的宽度，以达到更灵活的布局效果。