HTML百分比布局栅格系统是一种流布局，可以根据不同屏幕尺寸自适应调整不同的布局，从而使网页更加美观与易读。下面是使用html百分比布局栅格系统的代码。

<div class="row">
<div class="col-4-12">
<p>这是第一列</p>
</div>
<div class="col-4-12">
<p>这是第二列</p>
</div>
<div class="col-4-12">
<p>这是第三列</p>
</div>
</div>

代码中，使用了一个.row类来包裹一行中的所有列，然后针对每个列使用了.col-x-y类，其中x表示列宽占据总列数的比例，y表示总列数。例如，上述代码中，每列占据了4/12的宽度，总列数为12。

同时，由于是使用百分比布局，因此无论是在PC端还是在移动端，都可以自适应地显示不同的布局。这种方式非常灵活，适用于各种网页设计，并且为用户提供了更好的视觉体验。