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端還是在移動端，都可以自適應地顯示不同的布局。這種方式非常靈活，適用于各種網頁設計，并且為用戶提供了更好的視覺體驗。